[Support request] Adding buttons in mobile menu

[Stéphane]

Hello,

I have a few buttons in my desktop navbar/menu; they work all right. I inserted them by creating elements with the generate_menu_bar_items hook.

However, they don’t show up in my mobile navbar/menu. I tried all mobile hooks that looked like potential candidates – generate_inside_mobile_menu, generate_inside_mobile_menu_bar, generate_inside_mobile_header, generate_after_mobile_menu_button, generate_inside_mobile_menu_control_wrapper – but none of them added the buttons in the mobile menu. Is there a hook to achieve what I want here? Am I doing something wrong?

Best regards, Stéphane

[Elvin]

Hi Stéphane,

Can you link us to the site in question? To inspect how the header is structure so we have an idea which hooks to recommend.

generate_inside_mobile_header only works if you have Mobile Header enabled on Appearance > Customize > Layout > Header.

[Stéphane]

Hi Elvin,

Can you link us to the site in question? To inspect how the header is structure so we have an idea which hooks to recommend.

Sure. I’ll put it in the private information of this thread.

generate_inside_mobile_header only works if you have Mobile Header enabled on Appearance > Customize > Layout > Header.

It was and is enabled.

Best regards, Stéphane

[Elvin]

I see,

In this case then generate_menu_bar_items should’ve worked.

I’ve checked the site and I’m already seeing buttons added to it as shown here – https://share.getcloudapp.com/BluD7wNA

Can you share an image of the button that should’ve appeared?

[Stéphane]

Poor choice of words on my part, sorry…: the buttons do indeed show up in mobile mode. Not in the menu itself, but in the header and that’s fine. What’s not showing up is the leftmost option of the menu, where I have a picture instead of text. That is the problem.

See pictures here. (That menu option is in white, which I’ll need to change, but it simply is absent from the mobile menu as it stands anyway. By the way, is there a way to choose a background colour other than white for the mobile menu?)

Best regards, Stéphane

[Elvin]

Ah I see what you mean now. Thanks.

Consider changing the background color of the mobile header menu bar and the background color of the current .

It can’t be seen because the background-image was applied on the <li> tag but it’s being blocked by the li tag’s child <a> tag with a background-color of white.

I’d consider moving the background-image to the anchor tag of .homeicon instead of the li tag.

I’d change the selector .homeicon to .homeicon > a

Example:

.homeicon > a {
	background-image: url('https://leprocesdes200.ch/wp-content/uploads/2021/10/logo-proces-des-200-transparent-2.svg');
/* background-image: url('https://leprocesdes200.ch/wp-content/uploads/2021/10/logo-test.png'); */
	background-size: 80px;
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 5px;
	background-color: red !important;
}

See it here – https://share.getcloudapp.com/qGuRjmwg

I’ve added background-color: red !important; but you can change this to a different color. I’ve only added this because you won’t be able to see the logo because of lack of contrast.

See pictures here. (That menu option is in white, which I’ll need to change, but it simply is absent from the mobile menu as it stands anyway. By the way, is there a way to choose a background colour other than white for the mobile menu?)

The mobile header on Appearance > customize > Colors > Primary navigation shares its color settings with the desktop’s primary menu, unfortunately. So the way to go if you want different colors for mobile-header is through custom CSS like the one I’ve provided. 😀

[Stéphane]

Yes, thanks, but…

That solves the issue for the mobile menu… but then it introduces issues for the desktop menu, where that menu option now displays:

• on the home page: as an entirely black rectangle
• on other pages: as an option on black background (instead of transparent; not super pretty but could be acceptable), and as an entirely black rectangle when one hovers on it

Best regards, Stéphane

[Elvin]

We can do a split setting for different viewports so the black background only applies to mobile.

Example:

@media (min-width:769px){
.homeicon > a {
	background-image: url('https://leprocesdes200.ch/wp-content/uploads/2021/10/logo-proces-des-200-transparent-2.svg');
/* background-image: url('https://leprocesdes200.ch/wp-content/uploads/2021/10/logo-test.png'); */
	background-size: 80px;
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 5px;
	background-color: unset !important;
}
}

@media (max-width:768px){
.homeicon > a {
	background-color: black !important;
}
}

min-width:769px is for desktop. max-width:768px is for mobile. 🙂

[Stéphane]

Thanks for the tip with the split setting. I’m learning from you.

Looks like I must have the full code (not only the background-color) in the mobile variant as well as the desktop variant. I did that and it works.

Remaining issue (with or without the change that I just mentioned): in desktop mode, the option disappears when one hovers over it. How to fix that?

Best regards, Stéphane

[David]

Hi there,

Instead of adding the Image as a CSS background to the Home menu item, have you tried adding an <img> HTML in the Navigation Label ?

[Stéphane]

Hi David,

Sometimes, the simplest solutions are right in front of you, staring at you, and you don’t see them… (You here means me.)

Yes, putting an <img> does the trick. (Strange, I had tried to put some tags, albeit not an <img>, in the Navigation Label, and WordPress had spitted it out. Anyway, it now works.)

Thank you for your help.

Best regards, Stéphane

[David]

Glad to hear that.

[Author]

Posts