Menu icon Foundation
over-riding foundation styles css

my site is: www.omegadesignla.com
And im having trouble styling the nav bar because it doesnt seems like my css over-rides are working. I have css:

top-bar-section ul li > a{
    font-size: 2.0rem;
	color:blue;
}
            

         

but when i load page it seems foundations defaults take over and i cant load the correct css to increase the font size in the nav bar items. I am loading my style.css link last in order so I thought that would over-ride but am i missing something? Please help!

css

my site is: www.omegadesignla.com
And im having trouble styling the nav bar because it doesnt seems like my css over-rides are working. I have css:

top-bar-section ul li > a{
    font-size: 2.0rem;
	color:blue;
}
            

         

but when i load page it seems foundations defaults take over and i cant load the correct css to increase the font size in the nav bar items. I am loading my style.css link last in order so I thought that would over-ride but am i missing something? Please help!

Ahmad Milzam almost 5 years ago

Hello there,

actually, you can modified the style without writing an additinal overide css.

Here in the _settings.scss you can find some variable to modify the topbar link:

// Set the link colors and styles for top-level nav
// $topbar-link-color: $white;
// $topbar-link-color-hover: $white;
// $topbar-link-color-active: $white;
// $topbar-link-color-active-hover: $white;
// $topbar-link-weight: $font-weight-normal;
// $topbar-link-font-size: rem-calc(13);
// $topbar-link-hover-lightness: -10%; // Darken by 10%
// $topbar-link-bg: $topbar-bg;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-hover: #272727;
// $topbar-link-bg-active: $primary-color;
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
// $topbar-link-font-family: $body-font-family;
// $topbar-link-text-transform: none;
// $topbar-link-padding: $topbar-height / 3;
// $topbar-back-link-size: $h5-font-size;
// $topbar-link-dropdown-padding: 20px;