Archived

This topic is now archived and is closed to further replies.

  • 0

Navbar Active Personalization


Question

Posted · Report post

Hi, I'm using the last PageLines framework on WordPress 3.4.2.

On the website http://www.mognonpartners.com/ita/ I'm using the classic NavBar but I need to have different colour for background and text with the Active state.

With this custom code I can change the NavBar for all the states:

.navbar .navline a {

background-color: #70b8dd;

font-color: #FFFFFF;

text-decoration: none;

But for the active I haven't found the correct code.

Thanks :)

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

OK, I think I am near to the solution... but I need you help :)

#site .navbar .navline li a:active {

background-color: #70b8dd;

color: #FFFFFF;

text-decoration: none;

}

But now I need the colours remains on the page I am looking.

Share this post


Link to post
Share on other sites

Posted · Report post

To change the link color for an active page, you'll need to add the body class page ID for that page and the link item class in the CSS. For example:

body.page-id-# #site .navbar .navline li.page-item-# a:active {

  background-color: #70b8dd;

  color: #FFFFFF;

  text-decoration: none;

}

body.page-id-# = The body class page ID for the specific page (you can find it in the body tag)

li.page-item-# = The class looks something like this (you find it using Firebug: http://www.pagelines.com/wiki/Custom_CSS)

Share this post


Link to post
Share on other sites

Posted · Report post

I edited... solved!

body.page-id-38 #site .navbar .navline li.page-item-38 a {

background-color: #70b8dd;

color: #FFFFFF;

text-decoration: none;

}

So when I am on the single page the link on the navbar has font and background different than the others.

Catrina you are the best! :)

Share this post


Link to post
Share on other sites

Posted · Report post

You're welcome and yes, and you just repeat the same process for the other pages.

Share this post


Link to post
Share on other sites