sticky navigation

I need to change the width measurement of the sticky navigation. The product names I wrote in the menu are very long. How can I do this?

Hello,

Could you please share some screenshots of the issue where you want to change the width? This will help me better understand the problem and provide you with a suitable solution. Also share the page URL of your site.

Best Regards,

In the first image, you can see the area I have marked with a square. I need to slightly increase its width. When I use the following code:

.wd-sticky-nav:is(:hover, .wd-opened) {
    width: 500px;
}

It turns into the appearance shown in the second image. I am adding this code in Woodmart Theme Settings → Custom CSS → Global Custom CSS section.
As for sharing the link, I am currently running the project locally. Once I finish the site, I will upload it to a host. Could you help me with this issue?

Best Regards,

Attachments:

You must be logged in to view attached files.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS. You can adjust the values in the code as needed to match your exact requirements.

.wd-sticky-nav-enabled {
    --wd-sticky-nav-w: 70px; /* default collapsed width */
}

/* Set expanded sticky nav width */
.wd-sticky-nav:is(:hover, .wd-opened) {
    width: 320px !important; 
}

Best Regards,

When I added the code you provided, it didn’t produce a different result from what I had done. I am sending you another image; please pay attention to the area I marked with a square. The HTML blocks are positioned above the sticky navigation. Shouldn’t we give a left margin to the HTML blocks? Also, you are responding too late.

Attachments:

You must be logged in to view attached files.

Please respond to this matter. I receive your replies after one day, and this delays my work.

Hello,

We need to check your site admin access. While your site is on the localhost, we cannot do it. Can you move your site on a live staging host?

Best Regards,

Alright, I have set it up on a subdomain of my own hosting. You can access it at

I have solved it with this code, so you no longer need to log in to the system:

.wd-nav-sticky .wd-dropdown-menu.wd-design-full-height {
    margin-left: 145px;
}

Hello,

We are glad that you managed to solve the problem yourself. You are Great!!!

If you have a moment, we’d really appreciate your feedback — it helps us improve the theme and shape future updates: https://tally.so/r/w4l54k

Thanks again for contacting us.

Topic closed.
Best Regards,

[Author]

Posts