Help me designing dropdown button menu from demo mega electronics

Hello,

I want to use the demo https://woodmart.xtemos.com/mega-electronics/ on my site, thing is that I want to remove the sticky sidebar from left and use a normal dropdown button that will list once hovering/clicking on the All categories button from the “Header bottom”.

What I am curious is how can I design to have the exact same button on my dropdown menu button as it’s used on the sticky bar button?

Attachments:

You must be logged in to view attached files.

Hello,

Navigate to Theme Settings > General > Sticky Navigation and disable the menu.
Afterwards, Navigate to WoodMart > Header Builder > Edit Current Header > Incorporate the Categories dropdown element into the Header:
https://ibb.co/pJYXLhV

Best Regards.

Hello, thank you for the quick answer, as you saw on the private labeling as I have attached the printscreen, I was able to add the categories button dropdown, thing is that I would love to use on that the same design of the button as the Sticky navigation button looks like.

So, please tell me how to add the Categories dropdown menu and use /edit the similar design as the one already integrated into the demo, from Sticky navigation one.

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the WP admin login details of your site so I can check and give you the possible solution.

Best Regards.

Sure, sharing it privately.

Attachments:

You must be logged in to view attached files.

hello! any news?

Hello,

Please try to use the below custom CSS code and paste it to Theme Settings >> Custom CSS >> Global CSS section:

span.menu-opener.color-scheme-light.has-bg {
    display: flex;
    align-items: center;
    border-radius: 42px;
    height: 42px;
    padding-inline: 3px;
    transition: background-color .25s ease;
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
	min-width: max-content;
}

.wd-header-cats.wd-style-1 .menu-opener:after {
    margin-inline-start: inherit;
    margin-left: 5px;
}

span.menu-opener-icon {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(39, 97, 231, 1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: all .25s ease;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

Best Regards.

That indeed worked. How can I edit the height of the button itself to be a bit smaller?

Please see the screen attached.

Thanks a lot, again!

Attachments:

You must be logged in to view attached files.

Hello,

Please use the below custom CSS code as well:

.wd-header-cats.wd-style-1.wd-event-hover.whb-bi44n7v9h0p47lop311x span.menu-opener.color-scheme-light.has-bg {
    height: 42px !important;
    margin-top: 7%;
}

Best Regards.

Thank you again for quick response, that is perfect!!

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts