[Resolved] Problem with the sub-menu colors from an extra button

[Robert]

Hi

I addes this code, for the red button in the MENU, into to the CSS:

/* podswietlanie MENU w ANCHOR */

.main-navigation .main-nav ul li[class*=”current-menu-“]:hover > a {
color: #1B1E51;
background-color: #ffffff;
}

/* studio classes menu button */

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button a {
background-color: rgba(234,60,36,1.0);
color: #ffffff;
border: 0;
line-height: 40px;
padding: 0px 24px;
border-radius: 6px;
margin-left: 30px;
margin-top: 1px;
transition: all 0.5s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button a:hover {
background-color: rgba(133,129,136,0.9);
color: #ffffff;
transition: all 0.8s ease 0s;
}

The sub-menu looks now like this:
https://snipboard.io/GzmahS.jpg

but the sub-menu from the red button looks:
https://snipboard.io/NUdmt0.jpg

It’s passible to change the code so, that the sub-menu from the red button
will looks like: https://snipboard.io/GzmahS.jpg ?

Kr
Robert

[Fernando]

Hi Robert,

Try replacing this:

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button a {
background-color: rgba(234,60,36,1.0);
color: #ffffff;
border: 0;
line-height: 40px;
padding: 0px 24px;
border-radius: 6px;
margin-left: 30px;
margin-top: 1px;
transition: all 0.5s ease 0s;
}

with this:

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button > a {
background-color: rgba(234,60,36,1.0);
color: #ffffff;
border: 0;
line-height: 40px;
padding: 0px 24px;
border-radius: 6px;
margin-left: 30px;
margin-top: 1px;
transition: all 0.5s ease 0s;
}

[Robert]

Hi

thx!

The colors are OK, but it’s passible to move the sub-menu from the red button a bit to the right so
it would start how is the red, vertical line on the print screen?

https://snipboard.io/M8QcRk.jpg

?

Something like the other, normal sub-menu:
https://snipboard.io/o3QxyP.jpg

Thx
Robert

[Robert]

I have it 🙂

thx

[Fernando]

Try adding this as well:

.main-navigation:not(.slideout-navigation) .main-nav li.studio-button ul.sub-menu {
    margin-left: 30px;
}

[Fernando]

I see. You’re welcome, Robert!

[Author]

Posts