Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

Under active page on navigation bar

I have this navigation bar:<div id= "header">
<span id= "nav" class= "block desktop width100">
<a class= "pageLink inlineBlock uppercase" href= "menu.php" style="margin-left:-10px">
<span class= "text"> Menu </span>
</a>
<a class= "pageLink inlineBlock uppercase" href= "how-it-works.php">
<span class= "text"> How it works </span>
</a>

<a href= "index.php" class = "inlineBlock pageLink home1">
<img src= "../assets/images/Logo.svg" height = "40px" width = "170px">
</a>

<a class= "pageLink inlineBlock uppercase" href= "about-us.php">
<span class= "text"> About Us </span>
</a>


<a class= "pageLink inlineBlock uppercase" href= "faqs.php">
<span class= "text"> FAQS </span>
</a>

<span id= "authLink" class= "uppercase pointer absolute">
<span class= "pageLink text"> Log In/Sign Up </span>
</span>
</span>


</div>

Open in new window


I want when Im on "menu" there is this css:
.pageLink.current .text{
border-bottom: 3px solid #cf5630;
}

Open in new window


or on any of those, to have that type of css, how can I do that?
Avatar of Chris
Chris
Flag of United States of America image

To clarify, you want to know how to add the CSS to the page?
There are 2 ways.. Add a separate style sheet, with all your definitions, or include them right on the page.

http://www.w3schools.com/css/css_howto.asp
Avatar of Jazzy 1012
Jazzy 1012

ASKER

No I want the menu bar to be highlighted on whichever page I am currently on
for example:
#nav a:active {
border-bottom: 3px solid #cf5630;
}
I think you are getting confused about what the a:active CSS selector does. This only changes the color of your link when you click it. What you need to do is introduce a new class e.g. ".selected" into your CSS and when you select a link, update the selected menu item with new class.

Something like this:

<div class="mainmenu">
    <ul>
        <li class="selected"><a href="index.php">HOME</a></li>
        <li><a href="two.php">PAGETWO</a></li>
        ....
    </ul>
</div>

// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS
li.selected a { color: #FF0000; }

Open in new window


Then you have to update the parameter for each selected page in the menu.
I dont get it can you show me an example that is with or similar to my code because I don't have "ul" or "li"
ASKER CERTIFIED SOLUTION
Avatar of Chris
Chris
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I want it to move for all the pages, not literately just menu.
For each page, you will copy the header above, and change the "selected" class to the < li > menu item for that page.. That way when you select the new page, the menu item is highlighted on that page when the page loads.