menu mobile

Hi @psycholoogmarieke

Try to adjust the menu height on mobile/tablet, and then adjust the padding again.

i did that but doesnt change anything. maybe it has to do with the css code? you made a css code for the nav menu height earlier.

Hi @psycholoogmarieke

Could you copy your navigation block or the whole header template?
I will try replicate the issue on my side.

that would be great. so the black color on the website is: #00000 and the black color on the mobile #121212

<!-- wp:gutenverse/nav-menu {"elementId":"guten-XBfPZl","menuId":8,"alignment":{"Desktop":"flex-end","Mobile":"flex-end"},"mobileMenuLogo":{"media":{"imageId":1311,"sizes":{"thumbnail":{"height":150,"width":150,"url":"https://www.psycholoogmarieke.nl/wp-content/uploads/2023/01/Zwart-kleinste-150x150.png","orientation":"landscape"},"medium":{"height":134,"width":300,"url":"https://www.psycholoogmarieke.nl/wp-content/uploads/2023/01/Zwart-kleinste-300x134.png","orientation":"landscape"},"large":{"height":458,"width":1024,"url":"https://www.psycholoogmarieke.nl/wp-content/uploads/2023/01/Zwart-kleinste-1024x458.png","orientation":"landscape"},"full":{"url":"https://www.psycholoogmarieke.nl/wp-content/uploads/2023/01/Zwart-kleinste.png","height":872,"width":1948,"orientation":"landscape"},"cmplz_banner_image":{"height":100,"width":350,"url":"https://www.psycholoogmarieke.nl/wp-content/uploads/2023/01/Zwart-kleinste-350x100.png","orientation":"landscape"}}},"size":"full"},"mobileCloseIcon":"gtn gtn-exit-light","mobileMenuMargin":{"Desktop":{},"Mobile":{}},"mobileMenuPadding":{"Desktop":{},"Mobile":{}},"menuHeight":{"Mobile":"40"},"menuBackground":{"type":"default","color":{"r":18,"g":18,"b":18,"a":1}},"mobileWrapperBackground":{"Tablet":{"type":"variable","id":"mPRca4"},"Mobile":{}},"menuPadding":{"Desktop":{},"Tablet":{"unit":"px","dimension":{"top":"5","right":"5","bottom":"5","left":"5"}},"Mobile":{"unit":"px","dimension":{"top":"","right":"","bottom":"","left":""}}},"menuMargin":{"Desktop":{"unit":"px","dimension":{"top":"","right":"","bottom":"","left":""}},"Tablet":{"unit":"px","dimension":{"top":"5","right":"5","bottom":"5","left":"5"}},"Mobile":{"unit":"px","dimension":{"top":"","right":"","bottom":"","left":""}}},"menuRadius":{"Desktop":{},"Mobile":{"unit":"px","dimension":{"top":"","right":"","bottom":"","left":""}}},"itemTypography":{"font":{"label":"Poppins","value":"Poppins","type":"google"},"size":{"Desktop":{"point":"15","unit":"px"},"Mobile":{"point":"16","unit":"px"}},"weight":"500","transform":"uppercase","spacing":{"Desktop":"0","Mobile":"0.1"},"lineHeight":{"Desktop":{"point":"1.3","unit":"px"},"Mobile":{"point":"22","unit":"px"}}},"itemSpacing":{"Desktop":{},"Tablet":{"unit":"px","dimension":{"top":"20","right":"20","bottom":"20","left":"20"}},"Mobile":{"unit":"px","dimension":{"top":"","right":"","bottom":"","left":""}}},"itemTextNormalColor":{"Desktop":{"r":255,"g":255,"b":255,"a":1}},"itemTextNormalBg":{"type":"default","color":{"r":18,"g":18,"b":18,"a":1}},"itemTextHoverColor":{"Desktop":{"type":"variable","id":"GGO1PZ"}},"itemTextActiveColor":{"Desktop":{"type":"variable","id":"GGO1PZ"}},"submenuIndicatorMargin":{"Desktop":{},"Mobile":{"unit":"px","dimension":{"top":"","right":"","bottom":"","left":""}}},"submenuIndicatorPadding":{"Desktop":{},"Mobile":{"unit":"px","dimension":{"top":"","right":"","bottom":"","left":""}}},"submenuIndicatorBorder":{"radius":{"Mobile":{},"Desktop":{}}},"submenuTypography":{"font":{"label":"Poppins","value":"Poppins","type":"google"},"transform":"uppercase","weight":"500","size":{"Desktop":{"point":"15","unit":"px"},"Mobile":{"point":"16","unit":"px"}},"lineHeight":{"Desktop":{"point":"","unit":"px"},"Mobile":{"point":"","unit":"px"}},"spacing":{"Mobile":"0.1"}},"submenuSpacing":{"Desktop":{},"Mobile":{"unit":"px","dimension":{"top":"5","right":"5","bottom":"5","left":"5"}}},"submenuTextNormalColor":{"Desktop":{"type":"variable","id":"white"}},"submenuTextNormalBg":{"type":"default","color":{"r":18,"g":18,"b":18,"a":1}},"submenuTextHoverColor":{"Desktop":{"type":"variable","id":"GGO1PZ"}},"submenuTextHoverBg":{"type":"default","color":""},"submenuTextActiveColor":{"Desktop":{"type":"variable","id":"GGO1PZ"}},"submenuItemBorder":{"radius":{"Desktop":{},"Mobile":{"unit":"px","dimension":{"top":"","right":"","bottom":"","left":""}}},"all":{"color":"","type":"none"}},"submenuFirstItemBorder":{"radius":{"Desktop":{},"Mobile":{"unit":"px","dimension":{"top":"","right":"","bottom":"","left":""}}}},"submenuLastItemBorder":{"radius":{"Desktop":{},"Mobile":{}}},"submenuPanelPadding":{"Desktop":{"unit":"px","dimension":{"top":"0","right":"0","bottom":"0","left":"0"}},"Mobile":{"unit":"px","dimension":{"top":"28","right":"28","bottom":"28","left":"28"}}},"submenuPanelBorder":{"radius":{"Desktop":{},"Mobile":{}}},"submenuPanelBackground":{"type":"default","color":{"r":18,"g":18,"b":18,"a":1}},"submenuPanelWidth":{"Mobile":""},"hamburgerAlignment":{"Desktop":"right","Mobile":"flex-end"},"hamburgerWidth":{"Mobile":{"point":"","unit":"px"}},"hamburgerSize":{"Mobile":"23"},"hamburgerPadding":{"Desktop":{},"Mobile":{"unit":"px","dimension":{"top":"12","right":"12","bottom":"12","left":"12"}}},"hamburgerMargin":{"Desktop":{},"Mobile":{}},"hamburgerColorNormal":{"Desktop":{"type":"variable","id":"GGO1PZ"},"Mobile":{"r":255,"g":255,"b":255,"a":1}},"hamburgerBgNormal":{"type":"default","color":{"type":"variable","id":"mPRca4"},"position":{"Desktop":"top right"}},"hamburgerBorderNormal":{"radius":{"Desktop":{},"Mobile":{"unit":"px","dimension":{"top":"","right":"","bottom":"","left":""}}},"all":{"color":{"type":"variable","id":"white"},"type":"none","width":"0"}},"hamburgerBorderHover":{"radius":{"Mobile":{}}},"closeWidth":{"Mobile":{"point":"","unit":"px"}},"closeSize":{"Mobile":"30"},"closePadding":{"Desktop":{},"Mobile":{"unit":"px","dimension":{"top":"0","right":"0","bottom":"0","left":"0"}}},"closeMargin":{"Desktop":{},"Mobile":{"unit":"px","dimension":{"top":"1","right":"1","bottom":"1","left":"1"}}},"closeColorNormal":{"Desktop":{"type":"variable","id":"GGO1PZ"},"Mobile":{"r":255,"g":255,"b":255,"a":1}},"closeBgNormal":{"type":"default","color":{"r":18,"g":18,"b":18,"a":1}},"closeBorderNormal":{"radius":{"Desktop":{},"Mobile":{}},"all":{"color":{"type":"variable","id":"white"},"type":"none","width":""}},"closeColorHover":{"Desktop":{"type":"variable","id":"white"}},"closeBgHover":{"type":"default","color":{"type":"variable","id":"mPRca4"}},"closeBorderHover":{"radius":{"Desktop":{}}},"background":{"type":"default","color":"","position":{"Mobile":"default"},"repeat":{"Mobile":"default"}},"border":{"radius":{"Desktop":{},"Mobile":{}}},"margin":{"Desktop":{"unit":"px","dimension":{"top":"5","right":"5","bottom":"5","left":"5"}},"Mobile":{"unit":"px","dimension":{"top":"5","right":"5","bottom":"5","left":"5"}}},"padding":{"Desktop":{"unit":"px","dimension":{"top":"5","right":"5","bottom":"5","left":"5"}},"Mobile":{"unit":"px","dimension":{"top":"5","right":"5","bottom":"5","left":"5"}}},"positioningType":{"Mobile":"default"},"positioningWidth":{"Mobile":{"point":"319","unit":"px"}},"positioningAlign":{"Mobile":"flex-start"},"positioningLocation":"default"} -->

<div class="guten-element guten-nav-menu guten-XBfPZl"></div>

<!-- /wp:gutenverse/nav-menu -->

<!-- wp:gutenverse/section {"gap":"no","elementId":"guten-NorYE6","heightControl":"min"} -->

<div class="section-wrapper" data-id="NorYE6"><section class="wp-block-gutenverse-section guten-element guten-section guten-NorYE6 layout-boxed align-stretch"><div class="guten-background-overlay"></div><div class="guten-shape-divider guten-shape-divider-top"></div><div class="guten-shape-divider guten-shape-divider-bottom"></div><div class="guten-container guten-column-gap-no"><!-- wp:gutenverse/column {"width":{"Desktop":25,"Mobile":null},"elementId":"guten-P80Umo"} -->

<div class="wp-block-gutenverse-column guten-element guten-column guten-P80Umo"><div class="guten-background-overlay"></div><div class="sticky-wrapper" data-id="P80Umo"><div class="guten-column-wrapper"></div></div></div>

<!-- /wp:gutenverse/column -->

<!-- wp:gutenverse/column {"width":{"Desktop":50},"elementId":"guten-bfgBTV"} -->

<div class="wp-block-gutenverse-column guten-element guten-column guten-bfgBTV"><div class="guten-background-overlay"></div><div class="sticky-wrapper" data-id="bfgBTV"><div class="guten-column-wrapper"><!-- wp:gutenverse/image {"elementId":"guten-9aDQ0L","imgSrc":{"media":{"imageId":1311,"sizes":{"thumbnail":{"height":150,"width":150,"url":"https://www.psycholoogmarieke.nl/wp-content/uploads/2023/01/Zwart-kleinste-150x150.png","orientation":"landscape"},"medium":{"height":134,"width":300,"url":"https://www.psycholoogmarieke.nl/wp-content/uploads/2023/01/Zwart-kleinste-300x134.png","orientation":"landscape"},"large":{"height":458,"width":1024,"url":"https://www.psycholoogmarieke.nl/wp-content/uploads/2023/01/Zwart-kleinste-1024x458.png","orientation":"landscape"},"full":{"url":"https://www.psycholoogmarieke.nl/wp-content/uploads/2023/01/Zwart-kleinste.png","height":872,"width":1948,"orientation":"landscape"},"cmplz_banner_image":{"height":100,"width":350,"url":"https://www.psycholoogmarieke.nl/wp-content/uploads/2023/01/Zwart-kleinste-350x100.png","orientation":"landscape"}}},"size":"full"},"altOriginal":"","captionOriginal":"","width":{"Desktop":{"point":"288","unit":"px"}},"height":{"Desktop":{"point":"136","unit":"px"}},"imgBorder":{"radius":{"Desktop":{}}},"imageFit":{"Desktop":"default"},"margin":{"Desktop":{}},"padding":{"Desktop":{"unit":"px","dimension":{"top":"10","right":"10","bottom":"10","left":"10"}}},"positioningAlign":{"Desktop":"flex-start"}} -->

<div class="wp-block-gutenverse-image guten-element guten-image guten-9aDQ0L"><a class="guten-image-wrapper"><img class="gutenverse-image-box-filled" src="https://www.psycholoogmarieke.nl/wp-content/uploads/2023/01/Zwart-kleinste.png" height="872" width="1948"/></a></div>

<!-- /wp:gutenverse/image --></div></div></div>

<!-- /wp:gutenverse/column -->

<!-- wp:gutenverse/column {"width":{"Desktop":25},"elementId":"guten-vWTNdm"} -->

<div class="wp-block-gutenverse-column guten-element guten-column guten-vWTNdm"><div class="guten-background-overlay"></div><div class="sticky-wrapper" data-id="vWTNdm"><div class="guten-column-wrapper"></div></div></div>

<!-- /wp:gutenverse/column --></div></section></div>

<!-- /wp:gutenverse/section -->

Hi @psycholoogmarieke

Please check this video I made on changing the menu settings :
https://www.dropbox.com/s/6canxkqrbwbr455/change%20menu.mov?dl=0

Your other topic answer is also included in this video.

And replace the previous code I gave you from this topic with this one :

@media only screen and (max-width: 1024px) {
	.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu {
		padding: 10px!important;
	}
  .guten-nav-menu .gutenverse-menu-wrapper ul, .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li > a {
    background-color: rgba(18, 18, 18, 1);
		line-height: normal!important;
  }
}

Let me know if you still having trouble with the menu.

Hi Yoga, thank you very much! ?? It looks way better now. I also removed the “line height” in typography.

the last question about the menu is: how can i make a line around the menu? like here https://ibb.co/W6dw1SJ

there is now a black line: https://ibb.co/Ybdx7Pv

and the background in the icon to leave the menu is still another black color.

Hi @psycholoogmarieke

Regarding the icon background color, try checking the Hamburger Style option and changing the background color.
Screenshot: https://ibb.co/dJr0Xzx

To add line around the menu wrapper, try adding this css codes (modify the 1px size and color to your needs) :

@media only screen and (max-width: 1024px) {
.guten-nav-menu.break-point-tablet .gutenverse-menu-wrapper .gutenverse-menu-container {
    border: 1px solid #ffffff;
}
}

One more thing, since you’ve added quite a lot of custom css, it’s better to keep a backup of all the codes you’ve added.
Just in case if there is an issue and you had to reset the site.

thank you so much! it looks nice now ??

I have saved the code! thanks for the advice. have a good weekend ??

It was my pleasure assisting you! ??
If you have any further questions or concerns, don’t hesitate to reach out. We’re always here to help.

Thank you.