-
Hello Team,
I’m currently setting up a new site using the “Keynote” template. I’m having trouble setting the background color of the hamburger menu on tablets (portrait mode) and mobile devices. My test devices are iphone, ipad and a Google Android mobile.
The problem occurs on the Home, About, and Single Post pages. I’ve tried adjusting the elements ‘Site Header – Primary’, ‘Site Header & Page Hero – Single Posts’ accordingly, but without success.
The only page where it works is the Blog page with element ‘Site Header & Page Hero – Blog and Archvies’
The goal is for the menu’s background to be white.Erroneous menu
Erroneous menuOperational menu
Operational menuPlease describe which settings of the container or its elements I need to adjust to achieve the desired result. Thank you in advance.
BR
andoro -
Hi andoro,
The Keynote template has 3 block elements – site header, 1 for blog and archives, 1 for single post, and 1 for the rest of the site.
You will need to change the hamburger background color in all 3 elements.
https://app.screencast.com/rmjFAwd4q7pP2 -
Hello Ying,
Thank you for quick response. Your screenshot is exactly what I have described in my ticket, so this does not really help. Having a look on the three Header Elements, please describe which item in the list view (left side) is responsible for the background color and it’s corresponding Block (right side) setting/styles ? Within the styles there is a for each device a respective BACKGROUND COLOR for ‘All screens’, ‘Tablet & mobile’ and ‘Mobile’. I’m a little confused about which of these settings controls the actual background color of the menu, as shown in the screenshots.
BR
andoro -
It’s the Menu toggle block. For the normal color, select the main selector, for the hover state, select the hover selector, for the toggled state, select the toggled selector. The color change can be done in the background panel.
https://app.screencast.com/AuSmA7UmufgsZ -
The focus isn’t on the toggle button itself. Take a look at the blue section of the menu at the bottom. White text on a blue background. It’s exactly this blue background that’s supposed to be white. That’s my problem. I have a brand-new local test installation here. It just won’t work.
BR
andoro -
So you want to change the menu background color not the hamberger background color?
If so, select the menu container block, click the manage selector button, you can change the background color in the backgrounds panel:
https://app.screencast.com/1ihzjowWh5KkF -
Thank you very much. This time it worked.
BR
andoro -
You are welcome 🙂
-
Apologies for reopening this ticket.
On the Site Header – Primary element, I accidentally changed the mobile Toggle button from inherited to local style. How can I revert it back to its original state ?
As you can see in the screenshot, the toggle button is invisible compared to my reference installation.BR
andoro -
I think once you clear the background color, it should go back to inherit.
-
Okay, it is inherited again. However, the button remains invisible.
-
It is blue on mouse over, but his does not help on a real device like iPone.
-
It is blue on mouse over, but his does not help on a real device like iPone.
Likely a cache issue. Try clearing the cache on the site and using an incognito window on your iPhone to test.
You can also link me to your site I can check it on my phone as well.
-
Currently, there is no cache implemented.
-
It looks like the main selector of the menu toggle on mobile has been set to white.
Can you check?
-
I fixed it, and it looks like it’s working.
- You must be logged in to reply to this topic.