Foundation
-
FollowReplies
-
Icon Bar - Highlight current Menu entry, Font Color
byVin Banton Wednesday, July 30, 2014 at 2:16 PM EST
Hello,
i despair of the customization of the icon-bar.
id like it to change the background-color and the font-color of the Menu items, that are currently selected.
therefore i used jquery to select the current item.
when i try to style the selected item via css, i only was able to change the background color of a link..
My question is:
How can i override the value of $icon-bar-font-color to highlight the current menu item?
Thanks for your help!
Vin
.selected {
/*this WORKS for background color change!: */
background-color: $primary-color;
/*this works NOT for Text color change:*/
color: red;
/*this works NOT for Text color change:*/
$icon-bar-font-color: red;
/*this works NOT for background color change:*/
$icon-bar-bg: green;
}
<!-- Current items from icon-bar selected -->
<script type="text/javascript">
$(document).ready(function(){
$('#icon-bar-highlight a').each(function(index) {
if(this.href.trim() == window.location)
$(this).addClass("selected");
});
});
</script>
<div class="icon-bar four-up" id="icon-bar-highlight">
<a class="item icon-bar-items" href="#">
<h3><label>{{ ... | upcase}}</label></h3>
</a>
<a class="item icon-bar-items" href="#">
<h3><label>{{ ... | upcase}}</label></h3>
</a>
<a class="item icon-bar-items" href="#">
<h3><label>{{ ... | upcase}}</label></h3>
</a>
<a class="item icon-bar-items" href="#">
<h3><label>{{ ... | upcase}}</label></h3>
</a>
</div>
Vin Banton
over 5 years ago
Hi Nutmeg,
thanks, i tried that but it doesnt work.
I think i use the latest foundation release, version 5.3.1, updated via bower.
Somehow i am not able to override the values of the variables OUTSIDE the _settings.scss.
My changes are in a file called _custom.scss.
the style.scss to generate the final style.css from looks like:
/* foundation */
@import "settings",
"foundation";
/* custom */
@import "custom";
So the custom.scss is after the settings.scss and should override the standard values.
What i just found out:
When i transfer the .selected {}-code from the custom.scss over to the settings.scss, they just override the standard values, ignoring the fact that they are inside the .selected{} - tag.
Vin, which Foundation version are you using? (3?)
Have you tried:
icon-bar-highlight a.selected { color: red;}