Change background color on mobile naviagation only

[cougarfootball]

Good morning,

I changed background color on dektop view and need to keep it, however, now I cannot "see" mobile navigation options as text and background both white. I want to change the mobile naviagation background color only  to #808080 (that looks like it works on preview mode). I've tried what I know, and although I can see my changes in preview mode, when I publish they disappear.

Website:

https://schscougarfootball.weebly.com/

Thank you very much for your help!

Carol

[Bernadette3]

Thanks for posting your website. Did you make the changes by adding code to Settings>SEO>Header area? If so can you post it here? Or did you change it through css/html.

[cougarfootball]

I'm a total novice, so I used F12 to acces the code, and then right clicked on the background of the mobile naviation page. I searched for the background color and changed the hex value......it shows on the preview, but when I publish, it always reverts back.....this is probably humorous and I'm a total amatuer and just mess around with things I probably shouldn't!  Thanks for your help!

[Bernadette3]

I'm a total novice as well, so I'm probably not much help. After you change the hex code did you save the theme in the top right corner? You would then have to publish the site again.

[cougarfootball]

Hi Bernadette,

Thanks for responding! There is no option to save in the top right corner, so I did CTRL S, but no luck. The minute I close out of F12, my changes go away even before I can publish.

Carol

[Bernadette3]

Can you get a screenshot of what you see? The save button should definitely be there. 😕 

[cougarfootball]

Sorry for the delay.....started back to school this week.............here is what I see when I'm trying to change the background color to grey so that you can see all the menu items on the mobile view....thanks again so much!

Carol

[Adam7]

If you add this to Settings > SEO > Header Code, it will make it black on the live site (not in the preview, though):

<style>
	@media screen and (max-width: 992px)
	{
		.mobile-nav
		{
			background: #000 !important;
		}
	}
</style>

[cougarfootball]

Adam,

Thank you so much.....you are dealing with a complete novice, so would you mind telling me where I can locate the Settings>SEO>Header Code at?

Carol

[cougarfootball]

Hi Adam,

I found it and it works!!! Thanks so very much!!! One more quick question.....why is the calendar page not visible on the mobile version? Can it only be used through chrome and no other browsers?

Thanks again so much!!

Carol