Menu icon Foundation
Top Bar Color Change

.top-bar {
    background: #202020;
}

.top-bar-section li a:not(.button) {
    background: #202020!important;   
}

.top-bar-section li a:not(.button):hover {
    background: #202020 !important;   
}

.top-bar-section li a .button:hover {
    background: red;
}

.top-bar-section ul li.active > a {
    background: gray !important;   
}

.top-bar-section ul li.active > a:hover {
    background: yellow !important;   
}
            

         

Hello!

I am trying to change the color for the top bar element.
I've managed to change all of them BUT, I'm still missing one.

When I hove over an item that has a dropdown, I want only the droped-down elements to have a color for the hover state, and not the parent. I'm attaching an image of what I would like,

Can someone help me?
Please let me know here: paulamouradp@gmail.com
Thanks in advance!
Paula

Image

Foundation 5topbartopbarcolorchange

.top-bar {
    background: #202020;
}

.top-bar-section li a:not(.button) {
    background: #202020!important;   
}

.top-bar-section li a:not(.button):hover {
    background: #202020 !important;   
}

.top-bar-section li a .button:hover {
    background: red;
}

.top-bar-section ul li.active > a {
    background: gray !important;   
}

.top-bar-section ul li.active > a:hover {
    background: yellow !important;   
}
            

         

Hello!

I am trying to change the color for the top bar element.
I've managed to change all of them BUT, I'm still missing one.

When I hove over an item that has a dropdown, I want only the droped-down elements to have a color for the hover state, and not the parent. I'm attaching an image of what I would like,

Can someone help me?
Please let me know here: paulamouradp@gmail.com
Thanks in advance!
Paula

Image
Knight Yoshi over 3 years ago

If you're using Sass
SCSS
.menu {
&.dropdown {
.submenu {
> li {
> a {
&:hover {
background-color: #4D4D4D;
}
}
}
}
}
}

If you're using just the CSS though (which I don't recommend).

.menu.dropdown .submenu > li > a:hover {
    background-color: #4D4D4D;
}

You can of course modify that to apply to only the Top Bar.

Paula Mourad over 3 years ago

Thank you Knight!

Unfortunately I don't use SASS (I have no clue how that works) :)
I tried with CSS but it didn't work.

Any other ideas?
Thanks!

Paula

Knight Yoshi over 3 years ago

Oh derp! Your tag says Foundation 5 (I was thinking Foundation 6 since it was just released).

.top-bar-section .dropdown li:hover:not(.has-form):not(.active) > a:not(.button) {
    background: #4D4D4D;
}

Though Sass isn't difficult, you just need a couple of command line tools, the rest is simple (easier on Mac/Linux than Windows, but possible for both).

Paula Mourad over 3 years ago

Thanks a lot!! It worked!!! :)))
I am having troubles with Orbit Slider....any thoughts on that?
Thanks!