Jazzy 1012
asked on
Under active page on navigation bar
I have this navigation bar:<div id= "header">
I want when Im on "menu" there is this css:
or on any of those, to have that type of css, how can I do that?
<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>
I want when Im on "menu" there is this css:
.pageLink.current .text{
border-bottom: 3px solid #cf5630;
}
or on any of those, to have that type of css, how can I do that?
ASKER
No I want the menu bar to be highlighted on whichever page I am currently on
ASKER
for example:
#nav a:active {
border-bottom: 3px solid #cf5630;
}
#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:
Then you have to update the parameter for each selected page in the menu.
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; }
Then you have to update the parameter for each selected page in the menu.
ASKER
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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