Debut - Header nested menu width adjustment

Store Design
1

Hi,

I need help regarding the width of my nested menu, I have the code to edit the width of it but it does not auto adjust for each platform.

Godzhand_0-1639306326605.png
Godzhand_0-1639306326605.png2537×425 127 KB

Code: theme.css

.site-nav__dropdown–centered {

top: 25px !important;

background-color: #000;

width: 65%;

As you can see the smaller my screen, it become dysfunctional and unable to scroll down on nested menu.

Godzhand_1-1639306451271.png
Godzhand_1-1639306451271.png1040×1065 139 KB

2

Hi @Godzhand

You can modify the CSS that works for different sizes of device.
Under theme.css you can find css mentioned with width of the menu and then modify the CSS.

3

Could you help me specify which code work for which platform? Basically, I am unsure how to edit for laptop. I found the mobile code but not for laptop.

Thanks.

4

Hello, I think you can add the css of width: 65% to the parent tag or parent’s parent.

Please share your sit URL for correct help.

5

url: animalvillageshop.com

pw: animalvillage

6

Hello,

I have checked your website menu. The drop down menu width will be equals to the main menu width on all screen sizes, as you reduce the screen size the menu width also decreases and the sub menu width fits inside the main menu width. I am sharing a code with you, please add this in assets → theme.css file at end of the file.

.site-nav__dropdown--centered {
    top: 25px!important;
    background-color: #000;
    width: 100%;
    left: 0 !important;
    border: 0;
}
.site-nav__childlist {
    width: 100%;
}

Thank you.