Menu icon Foundation
Change Background On Hover Icon Nav Bar

After reading the docs it is suggested to change the hover element on the icon bar with

$icon-bar-hover-color: $primary-color !default;

However, this does not work. Additionally, when using the inspect element tool I notice the a tag on class item is making the change. I have also changed that in my app.scss file and nothing happens.

Any suggestions?

div .icon-bar a .item:hover {
background:transparent;
}
            

         

<div class="icon-bar five-up">
  <a class="item">
    <img src="../assets/img/images/fi-home.svg" >
    <label>Home</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-bookmark.svg" >
    <label>Bookmark</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-info.svg" >
    <label>Info</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-mail.svg" >
    <label>Mail</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-like.svg" >
    <label>Like</label>
  </a>
</div>
            

         

iconbarhoverchange

After reading the docs it is suggested to change the hover element on the icon bar with

$icon-bar-hover-color: $primary-color !default;

However, this does not work. Additionally, when using the inspect element tool I notice the a tag on class item is making the change. I have also changed that in my app.scss file and nothing happens.

Any suggestions?

div .icon-bar a .item:hover {
background:transparent;
}
            

         

<div class="icon-bar five-up">
  <a class="item">
    <img src="../assets/img/images/fi-home.svg" >
    <label>Home</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-bookmark.svg" >
    <label>Bookmark</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-info.svg" >
    <label>Info</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-mail.svg" >
    <label>Mail</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-like.svg" >
    <label>Like</label>
  </a>
</div>
            

         
ayezee almost 5 years ago

Just a little more info and clarification. The app.scss is the only file I have linked in the head as comes with the standard LibSass download. Also, I am really scratching my head. If I understand it correctly, the app.scss is importing the settings.scss styles (foundation's default styles). Therefore, any changes I make in app.scss should override these styles. No matter what change I make they will not override. Curious to me, but I am probably missing something painfully obvious.

ayezee almost 5 years ago

I will put this here for anyone looking. I was able to affect my background hover element on the icon bar with this override in my app.scss file

.icon-bar .item:hover{
background:#333;
}