Mobile menu style

woodmart theme can change the style of the cell phone mobile menu, the following is my recorded video, I need is that style of cell phone mobile menu

Attachments:

You must be logged in to view attached files.

Hi,

Add this code to the Theme Settings > Custom CSS > Custom CSS for mobile:

body .wd-nav-mobile>li>a {
    color: green;
	  background-color:black;
}
body .wd-nav-mobile>li>a:hover {
    color: white;
	  background-color:black;
}

Please replace the colors as per your needs.

Best Regards.

I don’t know if I misrepresented it or if you got me wrong. I didn’t mean to change the color, but to change the style of the header menu on the mobile side, the style of the opening method, the drop-down style of the small arrow cursor

Hi,

You need to create two different menus in Appearance > Menu, assign one as main, and another one as mobile.

Then in the Header builder, you need to add the Main menu element: https://xtemos.com/docs/woodmart/header-builder/add-edit-builder-elements/

Then switch to the mobile view: https://xtemos.com/docs/woodmart/header-builder/header-responsive-settings/

And add the mobile menu, as a result you will have to the different menus on different devices.

Best Regards.

So that’s it, thanks a lot!

No, no, no, I think I still didn’t make myself clear. I actually have two headers, one for the mobile side and one for the desktop side. The menus I do use one menu bar for both, not a new menu for the mobile side because I want to use one menu for both the mobile side and the desktop side. I just want to change the style of the downward-grading triangle cursor in the mobile menu, so that it does not appear as a black square when I click on the triangle
And don’t show that vertical line when clicking on the menu!

I think I understand what you mean, give this CSS a try

.mobile-nav .wd-nav-opener {
border-left: 0;
}

.mobile-nav .wd-nav-opener.wd-active {
background-color: #FFF;
color: #242424;
}

Change the colours as you want.

Hello,

@wujuan911800262:

Sorry for the earlier misunderstandings. Regarding the Mobile Menu style the thing is right now under the Header Builder for the Mobile Menu there isn’t a separate style related options available. For the available options to configure related to it you can edit the Mobile Menu element under the Header Builder: https://snipboard.io/A2MrqL.jpg

Further, you can try out the CSS solution provided by maltgeorge, if it is of any help to you.

@maltgeorge:
Thanks for sharing your suggestions with other Customers. Appreciate that 👍

Best Regards

[Author]

Posts