Thread Starter
AZBros
(@azbros)
Just to clarify, I’m wanting to change the font size.
Hi AZBros. For the top menu you can use the id #nav-topbar. For the main menu use #nav-header.
Thread Starter
AZBros
(@azbros)
Okay, I tried this:
#nav-topbar .nav { text-align: right; font-size: 10px; font-weight: normal;}
#nav-header .nav { text-align: left; font-size: 16px; font-weight: bold;}
Unfortunately, it doesn’t seem to have the effect I thought it would. When I increase the font-size, the font appears to change a little, but not how I think it should. Does the above code look correct? Am I supposed to change another set of code somewhere?
You need to target the menu list items:
#nav-header .nav li {
font-size: 20px;
}
I believe all the menu anchor tags have padding applied so you may need to adjust that instead of trying to align the text. But then you get into issues with submenu and dropdown spacing. Gets messy.
Thread Starter
AZBros
(@azbros)
Okay, I got it working. Can you tell me how I would go about decreasing the padding on the top menu? I’m not sure if that’s what I need to do or not, but now that I’ve made the text in the Top Menu smaller, the menu area looks odd since it’s so much larger.
There are two media queries that control the menu spacing in the desktop/tablet view.
This is for top level menu items. The “>” selects only those child elements that are immediate child elements of the parent :
@media only screen and (min-width: 720px)
.nav>li>a {
padding: 15px 14px;
}
And this is for submenu items; it selects all children under the parent element but it doesn’t select the immediate children (which would override the above style) because the above style is more specific:
@media only screen and (min-width: 720px)
.nav ul li a {
padding: 10px 20px;
}
There are also different media queries that control the mobile menu items since they are all displayed at once when the mobile menu is expanded.
You mentioned a while back that you were searching main.css for the css selectors. Are you still doing that or have you got on to using one of the “inspect” tools?
Thread Starter
AZBros
(@azbros)
Thanks for the information. I’m still just trying to figure out some of the basics. I’m very new to all this coding. I’m attempting to learn as I go along.
Lately, I’ve just been looking at the code, trying to figure out what it does and then messing around with it to see what I’m able to do. I’ll research the inspect tools and see if they can help me at all.
Here are some references for the tools available for different browsers:
Info on using Chrome Developer Tools
https://developer.chrome.com/devtools
Info on using Firefox Firebug
https://www.studiopress.com/using-firebug/
Info on IE Developer Tools:
https://msdn.microsoft.com/en-us/library/gg589507(v=vs.85).aspx
Thread Starter
AZBros
(@azbros)
Awesome, I’ll take a look at those. Thanks!
