CODEWITHSUNDEEP
cssnavigationsasszurb-foundation
mstroiu
mstroiu

Reputation: 342

Foundation Top-bar Navigation styles

How can I override the default styles of the top-bar, nav-bar, etc ?

PS: I read the Foundation Docs, about the Top Bar and i have 2 use SASS, but I don't have a clue how do it.

Thank you!

Upvotes: 0

Views: 2197

Answers (3)

Dmitry Verzjikovsky
Dmitry Verzjikovsky

Reputation: 11

try this in your custom css file::

.top-bar-section li a:not(.button) {
    background:black;
    color: white;
    }

.top-bar-section li a:not(.button):hover {
    background:red;
    color: white;
    }

Upvotes: 1

One9ooh6
One9ooh6

Reputation: 11

I created an .app style sheet and attached it as an external style sheet. Within the style sheet, I created, 

.top-bar {

background: whatever color;

}

.top-bar-section li a:not(.button)
{
background: whatever color;
}

I am still learning Foundation and how to manipulate elements. I would using the inspection tool in Google Chrome to determine the elements to add to your stylesheet.

Upvotes: 1

giaour
giaour

Reputation: 4061

The SASS version comes with a settings file (_settings.scss or _settings.sass) where you can configure the colors and breakpoints for the whole Foundation library.

The top bar elements are at the bottom of the file. Just uncomment and alter the line with the variable you want to change.

Upvotes: 1

Related Questions