Mobile Device – Menu showing in black

[Naomi Smith]

I am having problems with the highlighted sections of the menu on a mobile device showing in black. I’m not able to find where to change this colour.

http://www.beachweddingsinthailand.com

[Sushil Adhikari]

Hi Naomi Smith,

You need to add this css to your child theme style.css to change background color of menu.

.menu-toggle {
background-color: #D85353 !important;
}

You can change value of background-color property as per your requirement.
@SEE For Reference: color code

Note: Please use child theme style.css to add this css so your changes will not lost on theme update.

Thanks

[Daniëlle]

Hello Sushil,

I get this code before from Binaya and that does work. I have a problem in the mobile menu.

In the menu I use ‘subitem’; that all works fine; also in mobile mode. Also the colors show as I want. But here is the problem;

When I go to one of the subitems in mobile menu – the first time it is shown in the color that I want. When I go again to the subitem in mobile menu, the subitem that I choose in the first time has now an ‘active background’ in black. I don’t want this to happen; neither the black but alsno not ‘active background’. I already updated the last version of simple & pure but it didn’t solve this problem.

Can you help me please?

Add later: I did change one of my name’s in the menu. The line (page heading border) which is shown automatic under the subject is not adjustable. Now the name is longer than the line; that doesn’t look nice. Can I change it somewhere, or do I have to add a (css) code to change this?

Can you help me also with this?

Thank you in advance!

[Binaya D]

Hi Danielle,

We are really sorry to inform you that it is really hard to understand your issue, so could you please explain about your issue with screenshots. So that it will we easy to both of us to find the solution asap. We hope you understand. We look forward to your respond.

Thanks

[Daniëlle]

I’m sorry – for me it is clear because I can see it. I hope it works to add a couple of screenshots.

In the first picture you can see the line (page heading border) and that it is shorter than the subject. I want the line as long as the subject. In this example ‘symbolisch afscheid’.

In the second screenshot you can see the mobile menu. That all works fine. When I click on, in this example ‘wijze 1’, I go to this page.

When I open mobile menu again and click on ‘w’ which is a main item, the subitems appear, but than already the item is black which I choose in step 1 – like you can see in the 3 picture.

I don’t want that the subitem which I chose before is black active when I choose it again. I don’t want to have that ‘active state’ in the mobile menu. When I choose a main item for example ‘over ons’ it doesn’t have a active state when I go again to the mobile menu. When it is not possible to lose that active state. I at least want to change the color; from black into another color.

[Sushil Adhikari]

Hi there,

Hi there,

To maintain border of page title you need to increase it manually for every pages:
For example if we had page with id post=174 [You can see on address bar of browser while editing page ]
Add this css on child theme style.css file.

#post-174 .type-page .entry-title::after {
	width: 10%
}

To loose the active state on re-opening menu please add this css on child theme style.css file:

@media only screen and (max-width: 768px) {
	.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
	    outline: none;
	    background-color: #080d07 !important;
	
	}
}

@media only screen and (max-width: 768px) {
	ul.sub-menu .current_page_item > a, ul.sub-menu .current_page_ancestor > a, ul.sub-menu .current-menu-item > a, ul.sub-menu .current-menu-ancestor > a {
	    background-color: #080d07 !important;
	  
	}
}

Note: Please use child theme style.css file to add this css, otherwise your changes will be lost on theme update.

Thanks

[Daniëlle]

Hello Sushil,

Thank you for the codes. Unfortunately they don’t work. The last two in combination do the opposite; they give the mobile menu an active state – I now try to change the color; than at least it is not black.. But would you please, if there is, give me another code to undo that active state in mobile menu after choosing an item.

The firtst code for the border of the page doesn’t work either. But maybe I do it wrong. Which one should I use:
#post-symbolischafscheid .type-page .entry-title:: after {
width: 10%
}
or
#symbolischafscheid .type-page .entry-title:: after {
width: 10%
}

Thank you

[Sushil Adhikari]

Hi there

It seems you had hide the title of page, so it’s difficult to find our what actually is making problem. However you can try this css to make border of Wedding Packages:

#post-1781.type-page .entry-title::after {
	width: 25%
}

And regarding the menu issue,  we assumed that you want to change color of menu on active state. Please use the css given on previous reply. if you didn’t mean this, please implement this css on your site so we can see what’s causing the problem.
@media only screen and (max-width: 768px) {
	.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
	    outline: none;
	    background-color: #080d07 !important;
	
	}
}
@media only screen and (max-width: 768px) {
	ul.sub-menu .current_page_item > a, ul.sub-menu .current_page_ancestor > a, ul.sub-menu .current-menu-item > a, ul.sub-menu .current-menu-ancestor > a {
	    background-color: #080d07 !important;
	  
	}
}

If you want to change the color, please change background-color property @See http://www.w3schools.com/cssref/pr_background-color.asp
Note: Please use child theme style.css file to add this css, so your changes will not lost on theme update.
Let us know if we are understanding fully or perhaps this is not what you meant for.
Thanks

		
	

[Daniëlle]

site title / page / web is

voorbeeld.nl/symbolischafscheid

How do I set this into the css code of the border page title?

And actually I want the opposite – not the active state in mobile menu – but I did change the color into the same color as mobile menu – in this way there is alsno no active state.

Thank you.

[Sushil Adhikari]

Hi there,

So you want to dispay breadcrumb to the top of content then please use WordPress navxt breadcrumb plugin . Here is the link to download
https://wordpress.org/plugins/breadcrumb-navxt/

Regarding to active menu issue, we had provide you a css that will make same background color on active state and normal state.
Anyway it seems you had already found the solution of your issue.

If not please please don’t hesitate to ask a question about our theme, we will be more than glad to assist you.

Thanks

[Daniëlle]

Hi Sushil,

Indeed the problem of active state is solved; I changed the color of the active state in the same color as background of mobile menu; so there is no active state.

I don’t want breadcrumb; I know I can add this; you made a video tutorial for this.

I want the line under the name of page; in my example ‘symbolisch afscheid’ in my example in grey, to be longer than ‘symbolisch afscheid’, now it is shorter. You give me a code for this; but it don’t work. I want to know if I use the code in the right way. My page is for example: example.com/goodbye, how should I set this into the code you give to me?

#post-1781.type-page .entry-title::after {
	width: 25%
}

Should it be:
example.com/goodbye.type-page.entry-title::after{
     width: 25%
}

Or is it otherwise?

Thanks again :)

[Sushil Adhikari]

Hi Daniëlle,

We had given you the example for one of the menu to adjust border bottom, you need to adjust manually for all the menu. You can do like this

#post-1781.type-page .entry-title::after {
width: 25%
}

There #post-* id will changes as per the post id of pages

Note: Please use those css on child theme style.css file, so your changes will not lost on theme update.

Thanks

Thanks

[Author]

Posts