font size of top categories in Foundation cc6

[[email protected]]

Hi all, I have tried to find information on how to simply reduce the font size of the top categories on the index page onl ($NAVIGATION_TREE). I tried playing around with :

foundation.css

box.navigation.php

I tried everything but nothing seems to change the end result as size remains always the same. I thought it was going to be a straight forward amendment, but apparently it must be well hidden. Previous similar questions on this topic from a few years ago are also quite confusing. My site is : http://www.preserving-football-history.net/

All in all, I am just trying to get all top categories to appear on 1 line.

Thank you for your help, hints, guidance, suggestions.

[bsmither]

Welcome [email protected]! Glad to see you made it to the forums.

In the file cubecart.default.css (will be empty except for a comment):

Add:

.top-bar-section ul li > a { font-size: 0.5rem; }

That may make the font size too small. Adjust to suit.

Also, you may want to reduce the space between words:

Add:

.top-bar-section li:not(.has-form) a:not(.button) { padding: 0 0 6.375rem; }

By putting custom rules in cubecart.default.css, since this file is called last, any rules here overrule others that came earlier, except those flagged !important.

[[email protected]]

Thank you bsmither, 

yes I was able to get reduce the font. I still need to play around with the padding which isn't coming our right but at least now I know where to intervene. So I guess changing the background colour of the navigation is amended the same way ?

Thank you again,

Rick

 

[bsmither]

Doing stuff like this will go much easier when you become familiar with the diagnostic tools of your browser.

Firefox used to have Firebug, but we must now suffer with its Developer Tools. I understand the other browsers have similar features.