Return to previous page

Dropdown menu - by ROBIUL ISLAM - on WordPress WooCommerce support

This topic has 5 replies, 2 voices, and was last updated 2 years, 10 months ago ago by Rose Tyler

ROBIUL ISLAM

Participant

June 3, 2021 at 11:54

How to create a full-width dropdown menu.

Please, contact administrator
for this information.

#289779 Copied Theme version: 7.2.10 WooCommerce version: 5.7.2

4 Answers

ROBIUL ISLAM

Participant

June 3, 2021 at 12:23

I already solve some problems from your topics with this code ( .item-design-mega-menu {

position: static;

}

.header-top, .header-main, .header-bottom {

position: static;

}

.item-design-mega-menu .nav-sublist-dropdown {

left: 0 !important;

margin: 0 !important;

width: 100% !important;

}

.item-design-mega-menu .nav-sublist-dropdown:before {

content: ”;

display: block;

left: 0;

right: 0;

height: 40px;

bottom: 100%;

} ).

Please contact administrator
for this information.

#289784 Copied
Rose Tyler

Support staff

June 4, 2021 at 10:57
Hello,

Try to replace the mentioned custom CSS code by:
```
@media only screen and (min-width: 992px) {
    .header-main-menu .item-design-mega-menu .nav-sublist-dropdown {
        left: 0 !important;
        margin: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
    .header-main-menu .item-design-mega-menu, .header-top, .header-main, .header-bottom, .header-bottom .et_column {
        position: static;
    }
}
```
Regards
#289884 Copied
ROBIUL ISLAM

Participant

June 4, 2021 at 11:37

Now, I don’t need 100% width.
How to create a dropdown menu 90% or left and right margin / padding 20px space.

#289887 Copied
Rose Tyler

Support staff

June 4, 2021 at 12:24
Hello,

Change this code https://gyazo.com/f422011601fc3c18bbe5fcc2b9231d87 to
```
.header-main-menu .item-design-mega-menu .nav-sublist-dropdown {
    left: 1% !important;
    margin: 0 !important;
    right: 0 !important;
    width: 98% !important;
    max-width: 100% !important;
    transform: none !important;
}
```
Regards
#289898 Copied
Viewing 5 results - 1 through 5 (of 5 total)