Menu icon Foundation
Changing topbar color

I am a new Foundation user.

I created a page that displays the topbar having the default color. Then with Compass I can change it by setting $topbar-bg: #00acf0; in the .scss file.

But when I view the responsive layouts Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) still have the default color. Only the desktop, Small tablet landscape (800x600) and Tablet portrait (768x1024) topbars have the color that I requested.

Can someone provide instruction or a pointer to available detailed documentation that describes all of the places in the source style sheets that need to be changed for the topbar colors to be consistent across supported display sizes?

Regards

Mark

colorstop bar

I am a new Foundation user.

I created a page that displays the topbar having the default color. Then with Compass I can change it by setting $topbar-bg: #00acf0; in the .scss file.

But when I view the responsive layouts Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) still have the default color. Only the desktop, Small tablet landscape (800x600) and Tablet portrait (768x1024) topbars have the color that I requested.

Can someone provide instruction or a pointer to available detailed documentation that describes all of the places in the source style sheets that need to be changed for the topbar colors to be consistent across supported display sizes?

Regards

Mark

Jeffrey Lee almost 6 years ago

One thing I discovered is since the top-bar is javascript intensive follow the example religiously. This will ensure that the things appear the way they should. I suspect the javascript is looking for specific classes and adjusting/coloring them as appropriate. When the classes aren't there, it doesn't complete the task.

I wish I could be of a bit more help. I had actually run into this problem (along with a few others, like the menu not looking correct on smaller devices) that was corrected by just doing everything in the example with regard to DOM elements and classes.