Styling Multiple Foundation Top Bars on One Page Using SASS
I'm new to SASS and I'm wondering what is the best method for styling two different top bars with different styles. What's the best practice for using SASS? This question is really about styling unique instances of anything from the built-in Foundation _settings.scss sheet. I uncommented and made changes to certain elements and it works really well if you want all instances of that component to be uniform, but when there are two unique versions of the same component, what should I do?
source to share
Agreed (... with your comment. Have an upvote!)
It is difficult to ferret out such information, and it may indeed be because it is somewhat difficult to do. Not impossible, but not easy.
The global SASS / SCSS changes are as follows: global. So while it is easy enough to change styles .top-bar
globally in _settings.scss
, overriding individual element instances has proven to be tricky. The two .top-bar
, created independently of each other, are complex and are not done using global variable solutions.
The obvious and purely CSS way is to add an ID to each menu (I don't like IDs, but they match the score in this case due to their almost unbreakable specificity), and then you should be able to create each menu by simply making each rule enough to override the base styles .top-bar
. I do it for sure. So far, so good.
Here's my SCSS:
/* ==================
Page Head Styles
================== */
#utility-nav {
display: block;
width: 100%;
top:0;
width: 100%;
.top-bar.utility {
background-color: white;
margin: 0;
height: 29px;
a {
line-height: 29px;
height:29px;
padding: 0 auto;
color: #777;
background-color: white;
font-size: 14px;
&:hover {
color: #777;
background-color: #f2f2f2;
}
}
}
.top-bar-section {
max-width: 1170px;
margin: auto;
}
}
What this CSS refers to:
#utility-nav {
display: block;
width: 100%;
top: 0;
width: 100%; }
#utility-nav .top-bar.utility {
background-color: white;
margin: 0;
height: 29px; }
#utility-nav .top-bar.utility a {
line-height: 29px;
height: 29px;
padding: 0 auto;
color: #777;
background-color: white;
font-size: 14px; }
#utility-nav .top-bar.utility a:hover {
color: #777;
background-color: #f2f2f2; }
#utility-nav .top-bar-section {
max-width: 1170px;
margin: auto; }
And here is the HTML that it attaches to:
<!--
Top Utility Menu
-->
<div id="utility-nav">
<nav class="top-bar utility show-for-large-up" data-topbar role="navigation">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li><a href="#">Careers</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</section>
</nav>
</div>
<!--
End Top Utility Menu
-->
So this ONE menu (the topmost Utilities menu) has been canceled. Now we are working on the second, # main navigation menu.
In short, they don't make it easier. It would be nice if I could use SASS mixins to create a class .top-bar-2
and just have it on, but can't get executed at this time .
source to share