Setting Categories Design like simplygreentrade.com

Hello i saw simplygreentrade.com categories and i guess it has some code arrangement, can u help me if its easy to set up same code design?

Hello,

Can you please send us some Screenshots of the categories design where you want to use. I Will check and give you a possible solution.

Best Regards.

These are categories design from simplygreentrade, can u help about same design ? or need some professional help ?

Attachments:

You must be logged in to view attached files.

Hello ???

Hello,

Go to WoodMart > Header builder > edit current header > add the browse categories elements in the header.
https://prnt.sc/GAEwUkFgxBz1

Create Mega menu blocks for each menu item in HTML blocks https://xtemos.com/docs/woodmart/html-blocks-2/

Best Regards.

Dude i know its already like that but i mean design which is together look like categories menu and item like are together there is no gap no shadow when u hover elements in categories and categories has border radius and padding in the image. i mean this.

Hello,

You need to create HTML Blocks in the page builder and adjust the content in the page builder as per your requirements.

Then Go to Appearance > Menu > Categories Menu > select the drop-down settings set sizes and choose the HTML Block for the dropdown.
https://ibb.co/JcRbcyb

Please add this code to the Theme Settings > Custom CSS > Global for border-radius:

.wd-header-cats.wd-style-1 .menu-opener {
	border-radius: 40px !important;
}

Use this code for categories items border-radius:

.wd-nav-vertical>li>a {
border-radius: 40px;
}

Best Regards.

.wd-nav-vertical>li>a {
border-radius: 8px;
}
.wd-header-cats ul>li>a {
font-size: 16px;
font-weight: 400;
transition: none;
}
.wd-header-cats ul>li>a {
font-size: 16px;
font-weight: 600;
transition: none;
margin-right: 10px;
margin-left: 10px;
}
i made this changes its now look like what i want but there is still dividers also how can i remove border in categories element which is html block?

Attachments:

You must be logged in to view attached files.

Hello,

Try to add following custom css code in Theme Settings > Custom css > Global custom css:

.vc_separator .vc_sep_holder .vc_sep_line {
display: none;
}

Best Regards.

.wd-nav-vertical>li>a {
border-radius: 8px;
}
.wd-header-cats ul>li>a {
font-size: 16px;
font-weight: 400;
transition: none;
}
.wd-header-cats ul>li>a {
font-size: 16px;
font-weight: 600;
transition: none;

}
.wd-header-cats.wd-style-1 .menu-opener {
padding: 10px 15px;
min-width: 150px !important;
max-width: 100px;
}
.wd-nav-vertical.wd-design-default>li:not(:last-child) {
border-bottom: none !important;

border: none!important;
}
.wd-dropdown-menu.wd-design-full-height {
left: 95%;
top: 0;
border-radius: 0 8px 8px 8px!important;
box-shadow: none!important;
transition: none!important;
}
.wd-nav-vertical>li {
flex: 1 1 100%;
max-width: 100%;
width: 100%;
border: none!important;
}
.wd-nav-vertical.wd-design-default {
padding: 15px!important;
}

.wd-dropdown-cats,.wd-dropdown-cats .wd-nav-vertical,.wd-dropdown-cats .wd-nav-vertical>li:first-child>a {
border-top-left-radius: 10px !important;
border-top-right-radius: 0 !important ;
border-bottom-right-radius: 0 !important;
}
These are my codes and look like this but categories element look like a little bit higher if you notice it. How can i fix that? Also there is like blur in element

Attachments:

You must be logged in to view attached files.

Hello,

It is showing fine I did not see any extra height for the categories menus: https://ibb.co/qFNKWbG

Best Regards.

Could you please check image i shared i cant move mouse from after hover left to right its closing how can i fix that also element and html block has alignment problem if you can see there is gap between html block and header
Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

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

.wd-nav-vertical.wd-design-default {
    padding-right: 0px !important;
}

Best Regards.

Thanks worked. how can i fix this gap between html block and header i think its alignment not perfect.

Attachments:

You must be logged in to view attached files.

Hello,

I did not see any gap or space between the menus, please see this:
https://ibb.co/BNX8WPn

Best Regards.

Fixed

Hello,

You are Most Welcome.

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

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts