How to align the dropdown header menus side by side? DAWN THEME

Store Design
, , ,
1

I would like to get my header drop-down menus to be aligned side by side, for clarification please refer the picture down below

download (1).jpg
download (1).jpg1170×475 29.2 KB

as you can see in the picture above both of the drop-down menus are centre aligned but the menus are placed in a vertical manner, and I would like to place them in a horizontal centre-aligned manner.

Any support or links would be much appreciated.

URL: Abbasi (abbasigems.com)

PASSWORD: testingpage

Thank you.

1 Like
2

@justauser
put below css code into base.css file(online store->theme->asset->base.css)

ul.mega-menu__list.page-width.mega-menu__list--condensed {
    display: flex !important;
}

Ujjaval_0-1670847590222.png
Ujjaval_0-1670847590222.png1432×477 224 KB

3

@justauser

Please add the following CSS code to your assets/component-mega-menu.css bottom of the file.

.mega-menu__list.page-width.mega-menu__list--condensed {
    display: flex !important;
}

Thanks!

4

Hello @justauser ,
I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :

.mega-menu__list.page-width.mega-menu__list--condensed {
display: flex !important;
}
5

@justauser Got to assets/component-mega-menu.css and paste below css at bottom of file.

.header--top-center .mega-menu__list>li
{
float: left;
}
6

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.mega-menu__list {
display: flex!important;
}