Setting Categories Design like simplygreentrade.com

This topic has 16 replies, 2 voices, and was last updated 1 year, 2 months ago by Aizaz Imtiaz Awan.

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
August 12, 2023 at 9:11 am #488339

Bagget.net
Participant

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?

August 12, 2023 at 3:50 pm #488399

Aizaz Imtiaz Awan
Keymaster

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.

August 13, 2023 at 2:05 pm #488467

Bagget.net
Participant

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.

August 14, 2023 at 10:03 pm #488675

Bagget.net
Participant

Hello ???

August 15, 2023 at 9:52 am #488774

Aizaz Imtiaz Awan
Keymaster

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.

August 15, 2023 at 11:48 am #488821

Bagget.net
Participant

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.

August 15, 2023 at 2:34 pm #488873
Aizaz Imtiaz Awan
Keymaster
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.
August 15, 2023 at 6:31 pm #488938

Bagget.net
Participant

.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.

August 16, 2023 at 10:57 am #489039
Aizaz Imtiaz Awan
Keymaster
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.
August 16, 2023 at 5:50 pm #489128

Bagget.net
Participant

.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.

August 17, 2023 at 11:04 am #489234

Aizaz Imtiaz Awan
Keymaster

Hello,

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

Best Regards.

August 18, 2023 at 7:06 pm #489698

Bagget.net
Participant

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.

August 19, 2023 at 3:02 pm #489808
Aizaz Imtiaz Awan
Keymaster
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.
August 19, 2023 at 3:47 pm #489817

Bagget.net
Participant

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.

August 21, 2023 at 10:42 am #490046

Aizaz Imtiaz Awan
Keymaster

Hello,

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

Best Regards.

August 22, 2023 at 9:29 am #490324

Bagget.net
Participant

Fixed

August 22, 2023 at 2:23 pm #490451

Aizaz Imtiaz Awan
Keymaster

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