Menu icon Foundation
Can't Style Top/Nav Bar

I'm new to Foundation and am just wanting to use the simple (non-SaSS) version. I have Foundation 5 and am simply trying to style a new site.

I've been following the tutorial found here:

http://webdesign.tutsplus.com/articles/how-to-customize-the-foundation-4-top-bar--webdesign-14675

I don't like the menu with the black background on each menu button. I simply want to change it to be plain text, then I want to style it later for hover and active states.

I've tried everything to get rid of the gray background on the buttons, and the blue on the active button, but NOTHING works.

Actually, if you browse through the tutorial, you'll notice that the author created a gray gradient for the menu. For me, it doesn't turn out to be a light gray gradient for each button. They're dark gray, almost black.

I've tried viewing in Firefox and Chrome with the same results.

Any ideas how to actually customize the top and nav bars?

The tutorial is for Foundation 4; I'm using 5. But styles are styles, right?

Thank you.

stylesstyles not workingcustomizing top barcustomizing nav bar

I'm new to Foundation and am just wanting to use the simple (non-SaSS) version. I have Foundation 5 and am simply trying to style a new site.

I've been following the tutorial found here:

http://webdesign.tutsplus.com/articles/how-to-customize-the-foundation-4-top-bar--webdesign-14675

I don't like the menu with the black background on each menu button. I simply want to change it to be plain text, then I want to style it later for hover and active states.

I've tried everything to get rid of the gray background on the buttons, and the blue on the active button, but NOTHING works.

Actually, if you browse through the tutorial, you'll notice that the author created a gray gradient for the menu. For me, it doesn't turn out to be a light gray gradient for each button. They're dark gray, almost black.

I've tried viewing in Firefox and Chrome with the same results.

Any ideas how to actually customize the top and nav bars?

The tutorial is for Foundation 4; I'm using 5. But styles are styles, right?

Thank you.

Magda Jans almost 4 years ago

Code is always nice. Sometimes it is only a tiny thing one forgets. For instance: did you place your app.css (or wherever you place your changes) after the foundation.css? This page explains everything you need to know for creating a top bar navigation. Here is an example of how you combine a top bar for medium and large with a hamburger thingie for small screens. Also check out the documentation for visibility classes.

Good luck!

Ron Whitaker almost 4 years ago

Very comfortable with CSS. Been doing it since 1996.

Actually I kept at it for several hours yesterday and figured out some things.

But, when I shrink the browser down, the menu isn't appearing as it should when viewed on smaller devices. There's no menu or "hamburger" at all.

Should I include my code for assistance?

Thanks.

Magda Jans almost 4 years ago

Sorry to ask but and don't take it as an offense but how much do you know about CSS? When you edit the foundation.css there is nothing different from editing any other CSS file. And of course you cannot simply copy and paste the example into the F5-stylesheet. You will have to find the top-bar section and make the changes where they are necessary.