Jump to content
ginnywills

NavBar Hover Color

Recommended Posts

ginnywills    0
ginnywills

Hi,

I want to change the color of the text in the NavBar when you hover over it from white to pink (#ff0099). I have tried loads of different CSS and nothing is working.

www.audaciousgroup.com

Help?

Thanks,

Ginny

Share this post


Link to post
Share on other sites
ginnywills    0
ginnywills

I don't actually remember. I used firebug to experiment with lots of things but deleted it when it didn't work.

Share this post


Link to post
Share on other sites
batman    389
batman

Hi ginnywills

Please you can try with


.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {background-color: red;

 background-image: none;

 background-repeat: repeat-x;}


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
ginnywills    0
ginnywills

I tried that but that does not do anything. Its not actually a drop down menu. Does that matter?

www.audaciousgroup.com

Ginny

Share this post


Link to post
Share on other sites
batman    389
batman

Hi again

Please you can try with

.navbar .navline > li > a:hover { color: red;}

You may also use color codes there, such as #C00000 , if you wish to use more specific colors.


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Rob    547
Rob

.navbar .navline > li > a:hover { background-color:transparent;

color: rgba( 155, 130, 155, 0.9);

text-decoration:none;

}

Now the numbers in the rgba are purple. Change them to any numeric value for the color you prefer.

For more color codes: http://www.december.com/html/spec/colorrgbadec.html

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ginnywills    0
ginnywills

Is there a way to make the color change depending on which page you are hovering over?

Share this post


Link to post
Share on other sites
Rob    547
Rob

You can precede the code with .page-id-xx where xx is the actual page ID set by WordPress.


.page-id-22 .navbar .navline > li > a:hover { background-color:transparent;

color: rgba( 128, 128, 128, 0.9);

text-decoration:none;

}

This code above would change the color for page 22 only.

If you want multiple pages with individual colors, you need to copy and edit the code for each. However, if you have 2 pages that will use the same color, you may prefix with .page-id-23, .page-id-27 ... which changes the color for both pages 23 and 27 to the one you desire.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

The topic was marked as resolved.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ginnywills    0
ginnywills

Hi - sorry. Its not totally resolved!

The code you gave me works to change the color when you hover, but assigning a page id does not change just that page, it changes them all. Is there a way to have one page be pink when you hover, one be blue, etc?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

The code Rob provided does indeed work and shouldn't work on all pages. Please bear in mind that the you will need to copy this custom CSS for each page you wish to have different styling on.

For example:


// Works only on your Home page
.home .navbar .navline > li > a:hover { background-color:transparent; color: pink; }

// Works only on your Blog page
.blog .navbar .navline > li > a:hover { background-color:transparent; color: pink; }

// Works only on the page that has an id of 100
.page-id-100 .navbar .navline > li > a:hover { background-color:transparent; color: purple; }

// Works only on the page that has an id of 200
.page-id-200 .navbar .navline > li > a:hover { background-color:transparent; color: orange; }
[/CODE]

Therefore, you're going to need to find all your page ID's, as these are different per site, so we can not provide them for you. To find your Pages ID, the easiest method is to use either FireBug for FireFox or Google Chromes Web Dev tool and inspect your site's body class (see image). If you view your different pages, this body classes page-id-X will change to your Pages ID.

http://screencast.com/t/0XWqVl3UQaF3

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ginnywills    0
ginnywills

I think I have not made my request clear. I have the following code in there now. page id 7 is the WHY page and page id 102 is the HOW page. This makes it hovers pink or blue depending on which page I am on.

.page-id-7 .navbar .navline > li > a:hover {

background-color: transparent;

color: #ff0099;

text-decoration: none;

}

.page-id-102 .navbar .navline > li > a:hover {

background-color: transparent;

color: #0099ff;

text-decoration: none;

}

What I want is for it to change to pink when you hover over WHY and blue when you hover over HOW no matter what page you are on. Is that possible?

Thanks,

Ginny

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Ginny

Yeah you can change the colors site wide for the hover element. It looks like you have the correct code as well. Currently everything on your site is changing to pink on hover, so you've managed to put some effective Css in.


.page-item-7 .navbar .navline > li > a:hover {

    color: #insert color;

}

.page-item-102 .navbar .navline > li > a:hover {

    color: #insert color;

}



Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
joaoreis    0
joaoreis

Hello! I need a little help,

 

 I need to change the dropdown menu color when the mouse is over the sub options of the navbar. I've added the codes which were mentioned above, but it changes the main part of the navbar.

 

 I've also changed the color in the line code 136 /sections/navbar/style.less, but it didn't make any difference.

 

 Is there a way i can change the hover color of the navbar sub options?

 

Thanks!

Share this post


Link to post
Share on other sites
Rob    547
Rob

joareis,

 

Please open a new topic of your own and we'll address your issue there.  Thanks.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
      thanks
    • nizami
      By nizami+
      I have a problem at http://kambo.world. Using navbar for the main site navigation. It works fine in normal/desktop mode [first screenshot], using the WP Menu I have specified. But in hamburger mode it seems to do its own thing, picking a few pages at random [second screenshot] A fix for this greatly appreciated! 
       


×