Archived topic
Problem with the sub-menu colors from an extra button
5 replies · Started by Robert on January 24, 2023
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
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;
}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
I have it :)
thx
Try adding this as well:
.main-navigation:not(.slideout-navigation) .main-nav li.studio-button ul.sub-menu {
margin-left: 30px;
}I see. You're welcome, Robert!