Highlight buttons in the header menu

Hello,

I would like two buttons in the header menu (for both desktop and mobile) to be highlighted all the time, as shown in the screenshot. Currently, the highlight appears only when the button is clicked.

I would like the buttons to:

Stay highlighted permanently

Have a different color

Optionally include an animation or movement effect when clicked

Please let me know how this can be implemented.

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

Navigate to WoodMart > Header Builder, edit your current header, and use the Button element in the header builder. You can set the button text, background color, hover color, and choose the button style there. This will allow the buttons to stay highlighted permanently and match your design preferences.

https://ibb.co/rGLV2c4f

Best Regards,

Hello,

Thank you very much for your help. It solved the desktop part, but I would like to know how I can modify the buttons in the mobile menu as well, specifically in the mobile slide menu.

Could you please let me know how this can be done?

Thank you!

Hello,

For the mobile side menu, you need to edit the mobile header separately.

Navigate to WoodMart > Header Builder, then switch to the Mobile view (top toggle). After that, edit the Mobile Header and simply add the Button element there the same way you did for desktop. You can set its colors, style, and hover state independently for mobile.

See Screenshot for better understanding: https://ibb.co/RTgwXtCR

Best Regards,

Hello,

Maybe I was not clear in my explanation. On mobile, I do not want to add a button in the mobile header. Instead, I want to edit two categories inside the mobile side menu.

I would like to change their color and make them look like buttons inside the menu. To make this clearer, I have attached a screenshot of the menu showing exactly what I would like to change.

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

For the Mobile Menu, you need to create a separate Menu under the Dashboard > Appearance > Menus and choose the display locations as “mobile menu”, there you can add separate menu items in the mobile menu.

Please refer to this article https://xtemos.com/docs-topic/adding-menu-to-the-site/

If you want to change the color of the menu items in the mobile menu, share the page URL and let me know. I will check and give possible css code to change the specific menu colors.

Best Regards,

Hello,

Yes, I would like to change the colors in order to make the buttons in the mobile menu match exactly the buttons from the desktop version, including the same colors and hover effects.

I have attached a screenshot so you can see the buttons from the desktop version.

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

Try to add this code in Theme Settings > Custom CSS > Custom CSS for mobile.

.wd-nav-mobile #menu-item-27825 > a,
.wd-nav-mobile #menu-item-27824 > a {
    background: rgba(229,57,53,1);
    color: #fff;
    border-radius: 30px;
    margin: 10px 15px;
    text-align: center;
    justify-content: center;
}

.wd-nav-mobile #menu-item-27825 > a:hover,
.wd-nav-mobile #menu-item-27824 > a:hover {
    background: rgba(251,202,202,1);
    color: rgba(211,47,47,1);
    border-color: rgba(251,202,202,1);
}

Best Regards,

Hello,

Thank you very much for your help!

I change the code a bit so I can have also the green button

Problem solved

Best regards

Hello,

You’re Most Welcome!

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts