Change menu background

Tagged: Colours, menu

This topic has 5 replies, 2 voices, and was last updated 1 year, 1 month ago by Sakin.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
September 26, 2023 at 3:08 am #326214

RichaardChubb
Participant

Hi

ho do you change the menu background colour?

thanks

September 26, 2023 at 3:18 am #326215
Sakin
Keymaster
Hi Richard,

You can change the color code in the following CSS as per your need and add it in “Appearance => Customize => Additional CSS” to change the background color of the menu on the desktop.
```
@media screen and (min-width: 75em) {
	.navigation-classic #primary-menu-wrapper .menu-inside-wrapper {
		background-color: #eeeeee;
	}
}
```
Regards,
Sakin
September 26, 2023 at 4:06 am #326222

RichaardChubb
Participant

Thanks, but what if I need the background across the whole page width, not just behind the menu items?

Also, on my iPad, the drop-down menu seems to drop down behind the content so you cannot click on anything on dropdown.

Thanks

September 26, 2023 at 4:37 am #326225
Sakin
Keymaster
Hi Hi Richard,

If you want to make it to the whole page width then you need to give background color to the header. So, remove the previous CSS and then add the following CSS
```
.site-header {
  background-color: #38b6ff;
}
```
It’s strange why your menu on iPad is behind the content, please add the following CSS:
```
.site-header {
  z-index: 101;
}
```
Regards,
Sakin
September 26, 2023 at 4:46 am #326226

RichaardChubb
Participant

That is perfect, thank you.

Final question on the menu, is there a way to make it sticky when you scroll?

Thanks

September 26, 2023 at 5:02 am #326228
Sakin
Keymaster
Fr Sticky you can install a plugin called “Catch Sticky Menu” and in that plugin settings use the selector as
```
#masthead
```
Author

Posts