Menu Design

I have my menu in Elementor currently, but I would like to see the possibility of using the theme menu, however I would like to see if it is possible to do something like what I attached, what I am looking for is to put a box around a main menu.

Can I achieve something like this? In Elementor I just put the line to the container, and that solved it, but I do not see that customization option in your menu.

In case it is not possible… I am currently in need of using a “Sidecart” plugin since your cart icon does not appear in Elementor to put it, could you help me know how I could activate your sidecart if it were the header in Elementor?

Hi viz.design,

Thanks for reaching to us.

Please provide URL of the mentioned page, so I can take a closer look.

Regards,

hello, sending the url. My nav menu is Elementor.

Hi viz.design,

Please provide security credentials to view your site.

Regards,

sending credentials

Hi viz.design,

Thanks for details.

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) of your site to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Regards,

Can you help me without having to give you the login credentials? I just want to know if the menu box can be made?

Secondly, I want to know if the icon or the sidecart function is available to use with “Elementor Header Builder”? Because until now I haven’t found it and I have to use another “sidecart” plugin, which seems unnecessary to me if you have that function with the theme.

Hi viz.design,

Provide me with the mockup of the styles that you try to achieve and we’ll send proper instructions if it’s possible.

Regards,

You can see the example in the URL I sent… Right now I have the menu made with Elementor, with the Header Builder I have not been able to make the box that covers the menu, the “containers” do not have any border configuration.

Hi viz.design,

Thank you for your patience.

Yes, header builder does not have border options but it can be done with Custom CSS. So, please provide your site url, border styles you want and I will help you.

Best Regards,

Of course, I would like something like this: border type: solid, width: 1 px, radius: 10px, and color: #DADADA

Hi viz.design,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

div.wd-header-nav, .site-logo {
    border: 1px solid #dadada;
	border-radius: 10px;
}

Regards,

And how will it know where to put the border? I don’t want to put it on the logo. I want to put it around the menu, just like I sent in the examples.

Is there a way to use icon functions like ‘wishlist’ with elementor? It would be good to implement these functions for people who can’t use your ‘header builder’ due to lack of customization. Also the theme’s cart is not available in elementor?

Hi,

1. #633287. Here is the updated code, which includes only the selector for the menu inside the WoodMart Header Builder.

.wd-header-nav {
    border: 1px solid #DADADA;
    border-radius: 10px;
    padding: 5px 20px;
    flex-grow: 0;
}

This code features borders, rounded corners, and padding visually similar to those currently configured on your site. You can adjust the parameters and colors as needed to match your preferences.

Since your site does not use the WoodMart Header Builder, we used one of our demo versions to style the menu. The final result will look like this: https://monosnap.com/file/glqeIJY8VFtrQgZ4jXVxRN9Tge4msD.

2. #633289. All header elements provided by our theme are only available in the WoodMart Header Builder and are not accessible in the Elementor Pro header editor. Elementor Pro header elements have their own complex structure and differ significantly from the WoodMart Header Builder, so it is not possible to quickly transfer WoodMart elements to Elementor using just custom code. Implementing such functionality would require a complex and comprehensive solution, which has not been developed due to low interest among our clients in customizing the Elementor Pro header relative to our theme.

However, if you believe this is an important feature that should be implemented in our theme, you can submit a feature request in the designated section at https://woodmart.canny.io/feature-requests. If the idea gains support from the WoodMart community, it could potentially be added in future updates.

Kind Regards

Hi, it seems to work, except that if I have a menu in the Top Bar as Secondary, it also appears with a box. Can this be fixed?

I’ve already solved it, I just need to make it appear in the mobile menu as well. Could you help me?

Hi,

When preparing the code for you, we based it on our local environment, since your website does not use the Woodmart Header Builder. Given that the structures of both builders differ significantly, and since we cannot see the header you are creating in the Woodmart Header Builder, we are unable to provide code that will work the first time.

The code we provided in our previous response modifies the styles of all menus present in the headers, including desktop and mobile menus. If you modified the selector of this code to exclude the menu in the top bar on the desktop, you might have inadvertently removed the ability to customize the menu in the mobile header.

Taking your previous comments into account, here is the updated code:

.whb-general-header .whb-column.whb-visible-lg .wd-header-nav,
.whb-column.whb-hidden-lg .wd-header-nav {
    border: 1px solid #DADADA;
    border-radius: 10px;
    padding: 5px 20px;
    flex-grow: 0;
}

Detailed explanation of the selectors for better understanding:

1. .whb-general-header .whb-column.whb-visible-lg .wd-header-nav – This selector applies the code only to the central general row of the header builder and only for the desktop header, excluding the menu in the top bar and bottom bar on the desktop.
2. .whb-column.whb-hidden-lg .wd-header-nav – This selector applies styles to menus located in all three rows of the mobile header, regardless of which row it is located in.

If this code still does not work for you, please next time share a page link with the configured header you are creating in the Woodmart Header Builder. This will allow us to study all its settings and the layout you have created so that we can prepare more precise code that takes all of this into account.

Kind Regards

close this topic, thaxs

[Author]

Posts