Why my menu is white?
-
Hello, i dont know why my menu is white in phone mode, like in desktop mode it s everything ok. What i need to change or what can i do? Thanks
The blog I need help with is: (visible only to logged in users)
-
Hey there,
Thanks for reaching out!
Interestingly, when I look at the site via a mobile view, the menu shows in a list as seen here:
What device are you viewing your site on exactly? We’ll look to try and replicate that and see what we can do.
Many thanks in advance!
-
Hello, yes, i ve put it like this because i see it. But i want it with mobile list. I’m looking from Iphone. I want to put overlay menu for mobile, but when i try to put it, when i click the 3 lines, i can t see nothing, only white background just like in the photo(first post).
-
Hi there,
Are you willing to set up your site like that temporarily so we can see the menu in action? When we visit we see a functional menu and we are not able to examine it. Once our view matches the issue you are seeing please let us know and we will be better able to investigate.
Thanks!
-
Hello,
Yes, i put it back with overlay menu for phone, you can check it now. When i press the 3 lines button a white background shows up where should be the menu. I don t know how to fix it, i ve searched for it but nothing seems to works.
-
Hey there,
Thanks for adding that back in!
It looks like the submenu and overlay text colour needed to be set.
I created this to show you how to do this:
I hope this helps!
-
Hello thanks for your reply, i ve put it and changed the color, but from my phone it s still the same. I change in the web browser to see mobile version and there i m able to see it, but i don t think it s ok how it is. I will put a screen here. This is how it looks on pc(mobile version in chrome). And for my phone it s still the same. what s the problem here? i m not able to see the menu
-
I tried to replicate the issue on both Android and iOS devices, but fortunately, I couldn’t encounter the problem you mentioned. The menu seems to be displaying correctly, just like in your screenshot!
If you’re still facing difficulties, no worries! Let’s try a simple solution first. Just refresh your phone’s browser cache, and that should hopefully load the style changes you made. If you need any more help, feel free to let us know!
-
Thank you for reply, i refresh the cache and i still dont see it, i tried from 2 phones and still nothing. I m able to see it if i select the all page. I think the menu comes under the cover image? or something like that? Still can t solve it
-
I’ve seen something like this before, which happens when the menu itself is also placed inside a cover block, which looks like it may be the case here. I was able to replicate something similar to what you’re seeing, using Safari on my desktop set to iPhone mode:
In my case I see the close button, but it definitely appears to be under the cover block below it, and in my tests it doesn’t seem like changing the order of “layer” for these blocks (z-index) has much effect.
As I’ve seen similar problems when the navigation block is also set inside a cover, could I ask you to try moving your header items (logo, site title, and navigation blocks) out of the cover block you have in your header, and remove that cover block? It doesn’t look like the cover block in your header is being used to add a background image, so it seems like it might be an extra block you don’t need. If you find that the header looks narrow after doing that, you could add some padding to it:
-
Hello, yeah that s work very good, the problem was the cover in my header. Thank you very much, i removed the cover. But right now i have another problem, if you look at my website in web browser you see the black space in the left and right corner in header, how can i move the logo to the left and menu to te right? Like i see the border of the everything there and i can t make it bigger.
-
So I understand correctly, you’re wanting your logo and menu to be right on each edge (left and right) of the header?
If so, then the fix for this is a little unexpected. Due to the way that some blocks like the Group block works, it has a default ‘Padding’ setting which you don’t actually realise is there because – as in my screenshot above – the padding slider appears to be at 0.
In order to move your logo and menu closer to the corners of the site, please use the second padding slider as shown in my screenshot above, which applies padding to the left and right. All you need to do is move the slider forward a little, and then back to 0. Once you save this change, your logo and menu on the live view of the page should move to each corner. This may not reflect in the editor, however.
Please feel free to test this and let us know if you get into difficulties!
-
Hello,
Thanks for reply.I tried to do what you told me above, but it doesn’t work. It only works if I increase the ‘padding’ . I have attached an image below for you to see what I’m talking about. I have selected the header here, and I have the impression that this is all I can do, considering this border around it (the one in blue). Can I modify the size of this?
-
Hey there,
Many thanks for reaching back out.
It looks the theme design is imposing a gap either side of the site, and so this would need to be overwritten with some CSS.
This CSS should overwrite that and can be added via Appearance > Customize > Additional CSS.
/* Remove header padding */ .wp-site-blocks { padding-left: 0; padding-right: 0; } body .is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); padding-left: var(--wp--custom--gap--horizontal); padding-right: var(--wp--custom--gap--horizontal); }This should also apply for mobile view.
I hope this helps!
- The topic ‘Why my menu is white?’ is closed to new replies.
WordPress.com Forums 