Sub navigation Custom CSS

[marycrichton123]

Does anyone know how I can move the sub nav links to align with the correct main menu nav links:

URL: https://jadeo-2.myshopify.com/

PWD: meelib

[Galico-Digital]

In order to do the requested changes you need to follow these steps.

Go to Shopify Admin –> Online Store –> Edit Code –> base.css

In the end of base.css paste the following code that shared below.

@media only screen and (max-width: 767px) {
#HeaderMenu-MenuList-1 {
 padding-left: 30px;
}
#HeaderMenu-MenuList-2 {
 padding-left: 100px;
}
}

This will align the submenus with the main menus.

[marycrichton123]

@Galico-Digital

@media only screen and (max-width: 767px) {
#HeaderMenu-MenuList-1 {
 padding-left: 30px;
}
#HeaderMenu-MenuList-2 {
 padding-left: 100px;
}
}

Hi @Galico-Digital

Thank you or trying to help - this didn’t seem to work?

[Galico-Digital]

@Galico-Digital

@media only screen and (max-width: 767px) {
#HeaderMenu-MenuList-1 {
 padding-left: 30px;
}
#HeaderMenu-MenuList-2 {
 padding-left: 100px;
}
}

Can you try this code instead.

@media only screen and (min-width: 767px) {
#HeaderMenu-MenuList-1 {
 padding-left: 30px !important;
}
#HeaderMenu-MenuList-2 {
 padding-left: 100px !important;
}
}

[marycrichton123]

@Galico-Digital

@media only screen and (min-width: 767px) {
#HeaderMenu-MenuList-1 {
 padding-left: 30px !important;
}
#HeaderMenu-MenuList-2 {
 padding-left: 100px !important;
}
}

PERFECT THANKYOU

great

[tim_tairli]

That’s not a responsive setup. Try resizing your browser window, epsecially on wider screens:

Consider switching to drop-downs?

Or, if you want to keep the mega-menu look, rather try this:

@media only screen and (min-width: 990px) {
  header-menu {
    --left: calc( max(0px, calc( 50vw - (var(--page-width) / 2) - 1.2rem )) + 1.2rem + 2rem );  
  }
  #HeaderMenu-MenuList-1 {
    padding-left: var(--left) !important;
  }

  #HeaderMenu-MenuList-2 {
    padding-left: calc(var(--left) + 75px) !important;
  }
}