Drop Down Menu Font Size
-
On my menu on my website, I’d like to change the font size of the text that appears when I hover my mouse over the menu. I searched it up, and found this code to place in my Additional CSS:
#mainnav li .sub-menu a {
font-size: 14px;
}All I have in my Additional CSS is this:
/*
You can add your own CSS here.Click the help icon above to learn more.
*/So I placed the code below the existing code, but it didn’t work. Then I tried just replacing it, and it still didn’t do anything. I tried it with both the site caching enabled, and disabled, but it still didn’t do anything.
Is there any other way I could change the font size, or is there just a problem, or what?The page I need help with: [log in to see the link]
-
Hey,
This css should work for you:#nav-main ul.sf-menu a:hover { font-size: 14px; }
You can paste it into your custom css box in Apperance > Theme Options > Advanced Settings.
Hannah
I just tried as you suggested, but that didn’t work either.
I’m seeing this working. Have you cleared your cache?
Hannah
Ohhhh, I see now how it works. When I hover over the text it pops up bigger. Is there a way just to keep it a fixed larger text?
Thank you so much!
I’m confused. If you don’t want to change the font-size on hover you would only have to remove the above CSS.
Can you please explain a bit more so i can be sure of what you’re wanting?
Thanks,
KevinOkay. If you go to my website and hover over “Galleries”, the text that pops up is small until then hover over one of them, then it grows larger. I don’t want it to be small until you hover over it, I want it to be large no matter if you hover over it or not. See what I mean?
The text should be the same size on hover by default. Can you tell me what css you’ve added?
Hannah
You mean it should be the same size whether you hover on it or not? For me as I said, they are small until I hover over them, then they grow larger.
I used your CSS, but made it 25px:#nav-main ul.sf-menu a:hover {
font-size: 14px;
}I’m seeing them get smaller when they are hovered over. What browser are you using? Where are you adding your css?
Hannah
That’s interesting. I’m using Mozilla Firefox for my main browser, but I went to Internet Explorer and Google Chrome, and it did the same thing.
I added my CSS in Appearence > Theme Options > Advanced Settings.Just tried in several browsers and am seeing the menu get small on hover in each. Are you sure that all the cache has been cleared?
Hannah
Yep. I’ve cleared it multiple times. That’s just weird.
I went to my website on a different computer and tried it, and it did the same thing. It’s small until I hover over it, then it grows larger. Do you think there’s another code I could use instead?Sorry, it just occurred to me that you’re referring to the submenu. Try this css:
.sf-menu li a { font-size: 20px !important; }
Hannah
Haha! That’s funny. It’s alright.
It worked, but the size of text in the code is the size of the menu text, and the submenu is a fixed size a few pixels larger. I mean if I changed the font size to 27, the menu is larger, and the submenu is a few pixels even larger.I’m not seeing the css in your code. Did you add it?
Hannah
- The topic ‘Drop Down Menu Font Size’ is closed to new replies.