Menu icon Foundation
Icon Bar - Highlight current Menu entry, Font Color

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>
            

         

icon-bar menu top change color font background selected highlight current entry active

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>
            

         
Nutmeg over 5 years ago

Vin, which Foundation version are you using? (3?)

Have you tried:

icon-bar-highlight a.selected { color: red;}

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.