mobile menu

Hi @psycholoogmarieke

I’ve looked at your website and I see no difference in the submenu background from mobile or desktop.

if you want to change the submenu style you can click on the nav menu block and open settings (ctrl+shift+,). and then go to the style panel. in there, you should find the submenu item style and submenu panel style. try changing the background as you like and adjust it to mobile and/or desktop.

do you see the shadow in photo 1? how can i remove that.

and in photo 2, the subpages dont have the green with gold background.

Maybe it has to do with my CSS?

/4 blokken op homepage breder, op mobiel smaller/
@media only screen and (max-width: 1024px) { guten-psy{ width: 100% }

.guten-psy{ width: 100% }
}
@media only screen and (min-width: 1025px) { guten-psy{ width: 155% }

.guten-psy{ width: 155% }
}

.guten-column.guten-eCMYTc > .sticky-wrapper > .guten-column-wrapper:before {
z-index: -1;
}

.guten-eCMYTc div.wpforms-container-full {
margin-left: 0;
}

.guten-column.guten-wnVitj > .sticky-wrapper > .guten-column-wrapper::before {
z-index: -1;
}

/** WPFORMS button color normaal **/
.wpforms-form button[type=submit] {
background-color: #1B4235 !important;
color: #fff !important;
transition: background 0.3s ease-in-out;
font-family: poppins;
text-transform: uppercase;
font-size: 18pt;
font-weight: 500;
letter-spacing: 1.8px;
}

/** WPFORMS button color hover **/

.wpforms-form button[type=submit]:hover {
background-color: #DDD28C
!important;
color: #ffff !important;
}

.wpforms-container { font-family: poppins;
font-size: 18pt;
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children > a i, .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu > ul li.menu-item-has-children > a i {
font-size: 30px;
}

.guten-column .guten-icon-box, .guten-column .guten-icon-box-wrapper {
height: 100%;
} wpforms-1605 {

width: 100%;
margin: var(--wp--preset--spacing--30);

}

/** menu mobiel kleiner en uitgevouwen**/
@media screen and (max-width: 1024px) {
.gutenverse-menu .sub-menu {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}

.guten-nav-menu.guten-element.break-point-mobile .gutenverse-menu-wrapper {
    height: auto !important;
}

}

@media screen and (max-width: 780px) {
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children > a > i {
display: none;
}
}

/** menu achtergrond enkel op mobiel en niet pc**/
@media only screen and (max-width: 1024px) {
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu {
padding: 8px!important;
}
.guten-nav-menu .gutenverse-menu-wrapper ul, .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li > a {
line-height: normal!important;
}
}

/** randje om mobiele menu**/
@media only screen and (max-width: 1024px) {
.guten-nav-menu.break-point-mobile .gutenverse-menu-wrapper .gutenverse-menu-container {
border: 1px solid #DDD28C;

}


/** achtergrond blogs weg thumbnail container**/

.guten-postblock .guten-postblock-content{
width: 100%;
height : 100%;
}
}

/** achtergrond smal net als beeld**/

section .guten-container>.guten-element.guten-column>.sticky-wrapper>.guten-column-wrapper>* {max-width: none;

}

/** lettertype mobiele menu**/

@media only screen and (max-width: 1024px) {
.added-menu .menu-item a{
font-family: poppins;
text-transform: uppercase;
font-size: 17pt;
font-weight: 500;
letter-spacing: 2px;
}
}

• This reply was modified 1 year, 4 months ago by psycholoogmarieke.

Hi again

I have checked your CSS and nothing says about the submenu background or box-shadow. if it’s the background color and box-shadow for the submenu, we actually have it in our style panel for the nav menu.
set the box-shadow color transparent way down in the submenu panel style

https://ibb.co/zP8h5Dj

and also set the background color transparent way down in the submenu panel style

https://ibb.co/88ZX2qj

and last set the background color transparent way down in the submenu item style

https://ibb.co/Bff3BW4

hi, I tried all that but the shadow is still there!

Hi @psycholoogmarieke

try adding this in your css

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children .sub-menu {
box-shadow: rgba(45, 45, 45, 0);
background-color: rgba(27, 66, 53, 0);
}