Jump to content
Sign in to follow this  
veronica

Change Sub Menu Font

Recommended Posts

veronica

Hello, I'm using the EcoPro theme. When I create a submenu off the main top navigation, I'm finding that the default font used is too big and looks rather ugly. The padding within the submenu boxes themselves is also excessive. Is there a way I can customize the look, especially the font, for a submenu?

Share this post


Link to post
Share on other sites
veronica

Hi Kate, No link for this but here's a screenshot: screenshot2.jpg

Share this post


Link to post
Share on other sites
bryan-hadaway

`#nav ul.dropdown ul{font-family:georgia}` Drop that in Custom Code > Custom CSS. Thanks, Bryan

Share this post


Link to post
Share on other sites
veronica

Thanks Bryan. I tried your custom code, but it didn't work. I put this in the custom code instead: #nav ul ul li { font-size:10px; letter-spacing: 1px; text-transform:uppercase; font-weight: 700; line-height: 1em; padding: 0px 0px 0px; text-decoration: none; display: block; border: 1px solid transparent; border-bottom:none; } That changes the font to what I want it to look like. The spacing is the same though, as per the screenshot above. The width of the entire submenu is much too large as is the spacing between submenu links. How do I modify this?

Share this post


Link to post
Share on other sites
catrina

Can you post a screenshot of your current submenu so that I can see how much adjustment it needs? (A screenshot of the entire width of the submenu, please.)


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
veronica

Sorry, I wrote my last post incorrectly. I should have said that the entire width of the dropdown menu is too large, not the submenu. So in the screenshot above, I would like the dropdown menu where it says "contact", "newsletter", and "resources" to be more narrow. I have managed to change the font using the custom code in my last post, but I can't seem to adjust its width. Thanks!

Share this post


Link to post
Share on other sites
Kate

Hi Veronica - Something like this should work:

#nav ul ul{width:/*set width here*/;}[code]
	
	If you find that doesn't take, you may need to use the "!important" declaration:
	[code]#nav ul ul{width:/*set width here*/ !important;}

Share this post


Link to post
Share on other sites
veronica

Hi Kate, I tried numerous variations on your code and it made no change to the width. Any other suggestions?

Share this post


Link to post
Share on other sites
bryan-hadaway

You tried like this with no syntax errors: `#nav ul ul{width:800px}` changing 800 to whatever you want. Or maybe you wanted: `body #nav{width:700px}` Thanks, Bryan

Share this post


Link to post
Share on other sites
veronica

Hi Bryan, Yes, the first bit of code you suggested does nothing. The second bit with the body tag adjusts the width of the wrong thing. I tried adding width=100px to the bit of code I posted above:

#nav ul ul li
	{
	font-size:10px;
	letter-spacing: 1px;
	text-transform:uppercase;
	font-weight: 700;
	line-height: 1em;
	padding: 0px 0px 0px;
	text-decoration: none;
	display: block;
	border: 1px solid transparent;
	border-bottom:none;
	width: 100px;
	}
	

By adding that, I've *almost* got it to work. Adding the width there makes the highlight the correct width, but the main container for the dropdown menu is still too large. pagelines.jpg

Share this post


Link to post
Share on other sites
Kate

Hi Veronica - I actually just tried it, and I think all you need to do is add the "!important" declaration to the code I used. For instance:

#nav ul ul {width:100px !important;}

Share this post


Link to post
Share on other sites
veronica

Hi Kate, thank you! I'm not sure why it didn't work before - maybe because the highlights on the dropdown kept it overall the same size? In any case, your suggestion worked. Good karma to you! :)

Share this post


Link to post
Share on other sites
Kate

No worries Veronica, happy to help! And, thanks!

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

Sign in to follow this  

×