Menu icon Foundation
Sticky navigation background color when 100%

Hi, 

My main top navigation menu has no background color with "contain-to-grid", "sticky" classes. It just displays the usual menu links - Home, About, etc etc over a background image.  

When you scroll down the bottom of the page and the "sticky" is triggered, (it goes to 100% full width at the top of the page) the menu overlaps with the main text/content.  

Now, how can I add a background color to my navigation menu when "sticky" is on?  I just want a background color when it's in full 100% width on top of page.  So, regular menu should still be transparent & when sticky is on, I need a background color to separate from content.

Can this be done?  Any tips? I'm using Foundation 5+. 

Thanks!

stickycontain-to-gridbackground-color when 100% full width

Hi, 

My main top navigation menu has no background color with "contain-to-grid", "sticky" classes. It just displays the usual menu links - Home, About, etc etc over a background image.  

When you scroll down the bottom of the page and the "sticky" is triggered, (it goes to 100% full width at the top of the page) the menu overlaps with the main text/content.  

Now, how can I add a background color to my navigation menu when "sticky" is on?  I just want a background color when it's in full 100% width on top of page.  So, regular menu should still be transparent & when sticky is on, I need a background color to separate from content.

Can this be done?  Any tips? I'm using Foundation 5+. 

Thanks!

Rafi Benkual about 3 years ago

Here is an example in Foundation 5 http://codepen.io/anon/pen/vEgVQy