How to change color of the nav menu hover, and active states?
-
I’m should be able to just inject the CSS code in the CSS editor, but I am not sure what the code is because I cannot find the link states on inspect element.
I can use the tools to change the link colors, but not the states, as far as I can tell.
Currently, my nav links are light gray, and active is bold black, which is terrible on my gray background. I need active and hover state to be same color as my logo.
Is it possible? I’m using the Huntt theme.
The blog I need help with is: (visible only to logged in users)
-
Hi, it certainly is. Right now I’m seeing a light grey for the menu items and it appears your logo text is in white. Add the following CSS to change both the hover and non-hover to white. I might suggest a slightly different color for the two so that people have a visual indication when they are on the link, but that is just a suggestion. :)
.nav-menu a { color: #fff !important; } .nav-menu a:hover { color: #fff !important; } -
Great! Now we’re talking. What about the active state.
I put in
.nav-menu a:active {
color: #5fffea !important;
}but no change. The bold black on active links is terrible.
-
Are you talking about when you are on a page, you want that menu item to be highlighted in a different color? If so, we have to use the current page item class like this:
.nav-menu .current_page_item a { color: #5fffea; }I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.
-
Yep, I’m using chrome so it’s Inspect Element. I just could not find it in there. And that did work, thank you! I would really like to get rid of that bold, though. Can we keep it from going to bold and make it stay regular weight?
-
Absolutely we can get rid of the bold. Add this to the current page item rule
font-weight: normal; -
Your help was very much appreciated!
Let me take advantage of your helpfulness and ask you one more question…
Is it possible to have the ‘categories’ link in the nav reveal the dropdown when clicked, instead of taking you to a page when clicked? By default, if you click the little bitty + it will reveal the dropdown menu. I want it to reveal the drop down menu when you click ‘categories,’ as well.
If I can’t achieve this I might just ditch the theme all together. I’m a bit worried that the adjustments I want to make will require html, which you cant change…
-
You can do that. Go to Appearance > Menu in your dashboard, click on the Categories menu item to open it and then replace the URL with the # symbol.
-
Ok, I’m in Appearance, Menus, then the Categories tab but I don’t see my nav link ‘categories.”
-
Oops, I’m sorry, I didn’t check and thought you were already using a custom menu. See our Custom Menu Support Page on creating a custom menu, which will give you a lot of flexibility in getting your menu to look and function exactly as you want it.
-
-
-
I got the custom menu all set and used the # sign and it does keep it from going to the page, but it doesn’t open the drop down like the + does.
-
The # basically refreshes the page you are on at the time. The + is to open the submenu.
-
I did say that i needed it to open the sub menu… Clicking on a little bitty + is not user friendly.
-
With Huntt, that is not possible. The menu is designed to be friendly with all devices from laptops and a mouse or trackpad, to touch devices such as tablets and phones. On touch devices, if the top level menu is also linked, then you have to tap on it once to open the menu and then tap on it again to open the top level menu item. That has produced even more confusion for visitors. It’s quite the delicate balance trying to accommodate all users on all devices.
I looked at the possibility of changing the icon, but due to the way the designer did the + sign, I can’t really replace it. See what you think about the following and let me know. It makes the + larger and bold.
a.dropdown-toggle { font-size: 120%; font-weight: bold; }I’ll see if I can figure out a way to use some CSS trickery to replace the + with a down arrow.
-
Try this which “replaces” the + with a down arrow and see if this seems more user friendly to you.
a.dropdown-toggle { visibility: hidden; } a.dropdown-toggle:after { font-family: genericons; content: "f502"; position: relative; top: 10px; font-size: 120%; visibility: visible; right: 10px; } -
“On touch devices, if the top level menu is also linked, then you have to tap on it once to open the menu and then tap on it again to open the top level menu item. That has produced even more confusion for visitors. It’s quite the delicate balance trying to accommodate all users on all devices.”
I’m not sure I follow you. What I’m trying to do is make it more user-friendly, which includes for all devices. The user will not realize that the + and the text do different things, since they appear to be one UI element. The user will click the word before they will click the + no matter which device.
Even if I replaced with a down arrow, they will click the larger part of the UI element which is the word.
-
Sorry, it is not possible to make the top level menu item open the submenu in Edin with CSS. This would require editing of the theme php script files, and we cannot do that at WordPress.com.
There are other themes here where the menu functions as you desire. None are coming to mind at the moment, and there isn’t a way to filter for that in the Showcase.
-
No worries, I’m switching to wordpress.org. I realized too late that .com was not the one I wanted.
Thanks!
- The topic ‘How to change color of the nav menu hover, and active states?’ is closed to new replies.
WordPress.com Forums 