Menu color in mobile mode

[Alina]

Hi there,
I am using the theme Pure & Simple. I’m interested in changing the background and test color of the menu container “MENU” that appears only in the mobile version, from the default (white text on black background) to other colors.

It looks like someone else had the same problem for the theme Preferential. Here it is what “Dave’s Health” posted:
“I’m interested in changing the background of the menu container from the default blue to another color. I watched this tutorial (www.styledthemes.com/preferential-setup/…urs-for-your-website). The tutorial showed that you can change the menu container through the Navigation tab. However, when I attempt to customize my theme, the Navigation tab doesn’t appear. Any way I can fix this? Am I missing something?”

I am using the main theme, not the child.
Website: stagingsavannah.com

Thank you for your support!

[Binaya D]

Hi there,

Please use the following css to change the color of menu in a mobile version:

.menu-toggle {
    background-color: red;
    color: #FFF;
}

And for the Navigation tab, we are going to update our theme. So please stick in our social media.

Thanks

[Alina]

Thank you Binaya. It took a while, since I was not familiar with css, but I got it.

[Daniëlle]

Hi there,

I have the same issue. I’d like to have another color of the menu button showed on small devices. I tried to add the css code, shown in this topic, to the css in the editor. But it didn’t change anything. I use the child theme.

Can you explain how I can change it? –>(added this part later on 15-11) I look today and I don’t know why; but know the code does change the color. But it only change the color of the ‘menu’ button. When I click on the button the field (menu which appears on small devices), has still a black background. How can I change that?

And I also have another question. The websitetitel is always shown in capital letters; I’d like to change that in small ones. How and where can I change that?

Thanks for your help!

[Binaya D]

Hi There,

Please use the following css to fix your issue:

.site-navigation.toggled-on a:hover {
	background-color:red;
}
.site-navigation.toggled-on a{
	background-color: #E08131;
}

Note: Please use the custom css plugin or child theme to write css.
And regarding the Site title could you please provide us link of your site.

Thanks

[Daniëlle]

Thank you Binaya for your help. I added the codes and the color has changed.

I would like that my mobile menu has the same look as the menu on computers. I would like to change the color of the lines between the submenu parts (in the ‘normal’ menu you can change it in the customizer by colors and ‘submenu border lines’) – I like to change all lines in the menu shown on mobile phones.
I’d also like to change the ‘active background color’ of menu button shown on small devices.I tried a few codes; but that didn’t change it.
Please can you help? I think I need a few other codes.

Is it possible to change the letters of menu items into small ones? They are all shown in capital letters. Also the header of the page – ‘websitetitle’ is shown in capital letters. I’d like to change it in small letters. Is there a possibility to do that?

Thanks for your answer.

[Binaya D]

Hi Danielle,

It seems like you are using an outdated version of the theme, so we request you to update the theme to the latest version.
You can view this link for updating process: https://www.styledthemes.com/wordpress-tutorials/410-installing-updating-themes

Note: Please take a backup of your site before proceeding. Normally we use duplicator plugin to make a backup. https://wordpress.org/plugins/duplicator/.

Here is the video tutorials how to use duplicator and save it to your local computer https://www.youtube.com/watch?v=VdvOGV2eIjE
After you complete the update, then we will provide solution asap.

Thanks

[Daniëlle]

Hi Binaya,

I did download the 1.3.3 version; I think this is the last version of Pure & Simple?

I never did install another version of pure & simple..

I just want to add a couple of css codes into the editor. I think that’s all I need. Would you please read again my last post? The codes I received from you like ‘site – navigation …’ did work. I just want to change 4 other parts of the site, that’s all.

Mobile menu:
– color of border lines (lines between menu – items)
– active background color of mobile menu button.

Letters:
– shown in websitetitle
– shown in menu (on big and small devices)

I’d like to use ‘small’ letters in stead of only capital letters.

I hope you could help me.

[Binaya D]

Hi There,

Please use the following css to fix your issue;
Mobile menu:
– color of border lines (lines between menu – items)

.site-navigation.toggled-on a {
    border-bottom: 1px solid #157215;
}

– active background color of mobile menu button.

.menu-toggle:hover, .menu-toggle:focus, .menu-toggle:active{
	background-color: #fff;
}

Letters:
– shown in websitetitle

It seems that you have kept the Site Title in capital letters, so please follow the following steps to fix your issue;
Go to Dashboard => Appearance => Customize => Site Identity => Then please use the small letters to keep the Site Title => And save/update it.

– shown in menu (on big and small devices)
Regarding this issue could you please explain more about it because we are little bit confused about your issue. If you want to change the menu letters in the small letters, then please use the following css, if not, then please explain more about your issue.

.site-navigation.toggled-on ul a {
    text-transform: none !important;
}

Note: Please use the custom css plugin or child theme to write the css.

Thanks

[Daniëlle]

Hi Binaya,

You know exactly what I mean.

The codes for border lines of menu, active background color mobile menu and changing menu letters from big into small ones did work. I add only the ‘regular menu’ code to also change the letters on big devices into small ones; that also work.

Unfortunately just changing the letters of websitetitle don’t work. I also tried to ad the next code into the editor:
.h1 {
text-transform: none !important;
}
But it don’t work. Maybe is h1 not right.. ? Maybe I could use another code?

And for now I have one last question:
The word ‘menu’ on mobile devices (in the menu bar) is also shown as big letters – I’d also like to change that in small ones; I tried a few codes, but it didn’t work out. Can I add a code to change it?

Binaya; you helped me out very good; thank you for your time, answers and patience. I hope you can also help me out with my last questions. My website begin to look like I want it to :cheer:

[Binaya D]

Hi There,

Please use the following css to fix your issue:

.menu-toggle {
	font-size: 0.713rem;
}

NOTE: Please use the custom css plugin or child theme to write the css.

Thanks

[Author]

Posts