Font size and color for main horizontal menu

[davo88]

SMF 2.1.4
Can anyone tell me where I can change the font size and color for the text in the main horizontal menu please? - Home, Search, Calendar, Members etc

You cannot view this attachment.

I would like to increase the font size about 25%-50% and change the color of the text to black.

(Been searching for days trying to find this and can't figure it out... )

[Arantor]

Right click, inspect and let the browser tell you where? (Turn off minification first.)

[Julius_2000]

Hi davo88,

look for these rules in index.css

Code Select Expand

.dropmenu > li, #top_info > li {
display: inline-block;
margin: 0 2px 0 1px;
font-size: 0.9em;
line-height: 1.9em;
}
.dropmenu li a, #top_info > li > a {
padding: 0 7px 0 7px;
display: block;
border: 1px solid transparent;
border-radius: 4px;
color: #000;
}
And change font-size and color to your liking. If you only want to change the font-size for the menu strip and not the header in the top section (log-in, my messages etc.), you can also write at the end of your index.css:

Code Select Expand

.dropmenu li {
font-size: 1.08em;
& a {
color: #000;
}
}

To find out where you need/want to change things in the future, follow Arentor's recommendation and use the inspector tool of your browser (press f12). It's quite useful and you can experiment instantly with the values and see how it affects the elements.

[davo88]

@Julius_2000
Thank you for the specific guidance, I never would have figured that out.
Did you add the color line? That doesn't seem to be there in the stock 2.1.4 code I have.
You cannot view this attachment.

@Arantor 
Thanks for pointing me in the right direction. I will start learning more about the Dev Tools today.
To turn off minification, do you click on this link?
You cannot view this attachment.

And then you get the nicely laid out CSS. Is that the way to do it?

You cannot view this attachment.

[Kindred]

Turm off minimification in smf admin.
Use the browser tools to figure out what controls what and then Edit index.css

[davo88]

Turm off minimification in smf admin.

Thanks Kindred. In case anyone else is wondering, this looks like the one...
Admin > Configuration > General > Minimize CSS and JavaScript files

[Julius_2000]

To turn off minification, do you click on this link?

And then you get the nicely laid out CSS. Is that the way to do it?

You already figured out how to turn it off, so I just wanted to add that this link in the inspector in general always refers to the code lines in a specific css file that is assigned to certain elements you're inspecting. So you know where the code is located in which file when you go to your theme to apply changes you made in the inspector. In Firefox, you can also open the tab "Style Editor" (when you click on the link in the inspector you will be referred to that tab automatically) that lists all types of css files used on your side.
If minified, all the lines get optimized and put together by removing unnecessary lines of code, white space etc. for example.

Also: Sometimes when using the Inspector tool, you might not get the element you want to change right away with one click because it might be nested as a child of children, so you might want to go look further down the element chain to find the proper one. For beginners like me, it was sometimes quite challenging to figure out what needed to be changed in SMF's css, especially with the dropmenu/ topmenu stuff, like hovering colors etc., because it's quite intricately designed.

Did you add the color line? That doesn't seem to be there in the stock 2.1.4 code I have.

Oops, yeah, I changed the color to black (#000 is hex and thus shorter for black). In Firefox, when editing colors, be it either for fonts or backgrounds, you can press ctrl and simultaneously click with your mouse on the color icon which lets you cycle through different forms of color nomenclature/types like rgba (red,green,blue,alpha) or hsl etc.
So, for black you can use either "black" as a word, rgba(0,0,0,1), #000 etc.

[davo88]

Thanks for all the good info Julius_2000, it's really helping me get a handle on this stuff. 
Had a look at Firefox and its 'Style Editor' too. Looks useful and worth getting to know.