Twenty-Twenty Theme | Header and Drop Down colour issues

ve managed to change the colour of the pages but the drop down bar and drop down menu background colour aren’t what I want.

Hi, @mattmcfarlane123 have you tried changing the background color of the submenu(dropdown menu) using the Navigation Block settings? As shown below:

Hi @thelmachido for some reason I cannot find the navigation menu. If you check my website, the colour dropdown and dropdown background colour are the issues that I cannot edit.

*Update* managed to change header menu colour but still cannot change the black dropdown menu colour. If anyone knows how to change that, let me know! ??

?for some reason I cannot find the navigation menu.

You can click on the top of the menu items while in the site editor to view block settings. If your menu items are still in the page list you can click on Edit as shown below. Another option would be to try and get to your navigation block settings using the list view. Both options are shown in the short video below

Let me know if that helps

So, I see what you mean. I can implement the nav menu through list view and I do see the options to change colour. However, When I go to upload my changes (after selecting the menu I want to install) nothing changes. It’s almost like it doesn’t have the capability of overriding whatever header is in place now.

Hi @mattmcfarlane123 – I can see in the CSS code on your site that the sub-menu background colour is still set to black (#000)

When I go to upload my changes (after selecting the menu I want to install) nothing changes.

Could you explain a little more what you mean when you say you “go to upload my changes”? You shouldn’t need to upload anything, only save your template/template part in the Site Editor. Is that what you’re doing?

Keep in mind that you’ll need to select Submenu & overlay background to apply your new colour, as Thelma mentioned earlier. It’s pretty easy to accidentally select just Background instead so that’s why I thought it was worth repeating. ??

If you’re still having trouble, could you please take a screenshot of your Navigation block’s colour settings, as you see in my screenshot above? I’ll be glad to have another look.

@zoonini thank you this was very helpful. Only thing is now, I cannot get the edit to change in the “inspect” element. As the screenshot shows, I can manipulate the colour and get it white like I want but the changes won’t save! Any suggestions?

It also may be worth noting that on mobile, the menu is exactly how I wanted it (white background sub-menu) strange, right?

Hi @mattmcfarlane123 – just to be clear, changes made in the browser inspector will never be saved on your website; they only preview in your own browser temporarily.

Could you please do what I asked earlier, so I can better understand your settings? Thanks!

If you’re still having trouble, could you please take a screenshot of your Navigation block’s colour settings, as you see in my screenshot above? I’ll be glad to have another look.

The screenshot should be of your editor, not the browser inspector. It should show the same parts of your screen that you see in my screenshot above.

• This reply was modified 1 year, 6 months ago by Kathryn Presner. Reason: added clarification

@zoonini see the screenshot below. I go to edit page, access navigation through list view. From there, I selected white for my Sub Menu and Overlay Background, yet I still don’t see it white once I apply the changes.

Thanks for the screenshot.

That looks like the Page editor – not the template editor in the Site Editor.

Changes to the Navigation block are normally made in the template editor. Could you please go to Appearance > Editor > Home and try editing the navigation block in the template there?

And please send a screenshot of the entire browser window so I can confirm where you are doing the edits.

Thanks!

@zoonini please see screenshot below. There are my options when im in Appearance. Any suggestions from here?

@mattmcfarlane123 I understand what’s going on now, and apologies for the confusion. Neither Thelma or I had noticed that you were posting about Twenty Twenty, and not a block theme like Twenty Twenty-Three.

There is no Site Editor at all in Twenty Twenty, so you can’t edit the menu colours in the way we’ve been showing you, via the Site Editor.

The good news is that you can add some custom CSS to make the changes, instead.

Please go to Appearance > Customize > Addditional CSS and copy in this code:

/* Submenu background */
body:not(.overlay-header) .primary-menu ul {
  background-color: #ffffff;
}

Let me know how it goes.

That worked!! thank you so much and my apologies for not being more clear. You’ve been a great help. ??

Hey @mattmcfarlane123 – no need to apologise at all ??

That worked!! thank you so much and my apologies for not being more clear. You’ve been a great help. 

So glad that is working for you now, we would love if you would mark this topic as resolved in the sidebar. This helps our volunteers find the topics that still need attention and more people will get helped, possibly like you did.