Menu icon Foundation
Two Top Bars, each with a different colour

I wish to use TWO Top Bars at the top of my Home Page.

Happy to retain the default look and feel for the first Top Bar.

However, I would like the second Top Bar to be a different colour e.g. black.

What is the best way to achieve this?

I know I can overide the CSS in apps.css i.e.

top-bar, .top-bar ul {background-color: #090808;}

but this will obviously make all of the Top bars black.

Specifically:

  • what is the best structure to use to build the two Top Bars so that each one can be styled differently.
  • what is the best way to style that markup in apps.css

Thanks in advance!
Rob

topbar top bar

I wish to use TWO Top Bars at the top of my Home Page.

Happy to retain the default look and feel for the first Top Bar.

However, I would like the second Top Bar to be a different colour e.g. black.

What is the best way to achieve this?

I know I can overide the CSS in apps.css i.e.

top-bar, .top-bar ul {background-color: #090808;}

but this will obviously make all of the Top bars black.

Specifically:

  • what is the best structure to use to build the two Top Bars so that each one can be styled differently.
  • what is the best way to style that markup in apps.css

Thanks in advance!
Rob

Brian Smither about 1 year ago

There is the best way, and then there is the way I would try it. (I have not tried this.)

Of all the top-bar HTML, find the main controlling class identifier. Perhaps "top-bar".

For the second bar, rename-it to something else. Perhaps "top2-bar".

Copy out all the ".top-bar" CSS rules to a different CSS file. Perhaps "top2-bar.css".

In that file, rename all the ".top-bar" selectors to ".top2-bar". Re-style as desired.

(This is just a theory. Please experiment. You may have to also do something about any javascript.)