Instead of Vertical Menu i would like to have Horizontal menu in Dawn theme

[Instacarts]

Hi Shopify Community,

I am new to Shopify. i am using the Dawn theme for my store.

currently my menu is look like this.

but i would like to open my menu like this

also i would like to have my menu on other Header like my reference not on same header where my logo appears.

please guide me how i can do this.

thanks in advance.

header Menu

[BSS-Commerce]

Hi @Instacarts

Can you kindly share your store password with us? Then, we will check it and suggest you something.

[Instacarts]

hello BSS Comerce

PWD : Shriganesh

[BSS-Commerce]

Hi @Instacarts

You can customize the menu by editing the CSS code. Please follow our suggestions below:

• Go to Online Store > Theme > Edit code


• In the Edit Code, find the file base.css and find the code like below (they can be at line 2728):

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 0.5rem 0;
  margin: 0.5rem 0;
}

and add the following code inside { }:

position: absolute;
left:20rem;
width: 20rem;
background: #fff;

• When you change it, your menu will look like this:

I hope that this will work for you.

[infoatcodelab7]

@Instacarts

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

details[open] .header__submenu.list-menu:not(.list-menu--disclosure){
    position: absolute;
    background: #fff;
    box-shadow: 8px 4px 15px rgba(0, 0, 0, 0.08);
    top: -1px;
    left: 20rem;
    width: 20rem;
    }
    .header__submenu.list-menu--disclosure .icon-caret{
        transform: rotate(-90deg);
    }
    details[open] > .header__menu-item .icon-caret {
        transform: rotate(-90deg) !important;;
    }

[Instacarts]

hi BSS- Commerce,

thanks for help.

i have attached image for position amendment and the Arrow appearance.

can we able to do it?

i notice one more issue. if we clicking on other menu the new sub menu is staying there. its overlapping the previous menu. please look attached image.

i would like to have one menu at a time. we click other menu the last one goes off.

I am really appreciate your help so far. can you please look in to this as well

Thanks

Harshal

[Instacarts]

hello Infoatcodelab7,

its work partially, the sub menu always open at the top rather open side of the menu.

also if i click on another menu then its submenu overlap previous sub menu. practically if i click on another menu then last submenu disappeared and new menu open up.

also it possible the active main menu’s background colour is different than non active menu.

please have a look on the attached image

thanks

Instacarts

[BSS-Commerce]

Hi @Instacarts

The problem of submenu stacking is due to your theme logic. You won’t be able to change them with just the CSS code, but you need to edit the JS code file (example: global.js… ). It will be difficult to support you if we don’t have access to your store. If possible, please share your store access with us so we can better support you.

[Instacarts]

hello BSS-Commerce,

can you do it my connect as a collaborator?

please send me request

thanks

Instacarts

[BSS-Commerce]

Hi @Instacarts

The problem of submenu stacking has been solved. To fix the above error, we added the following code to the global.js file:

let clickedMenu = 0;
let details = document.querySelectorAll('[id^="Details-HeaderSubMenu"] summary')
details.forEach((detail) =>{
  detail.addEventListener('click', (event) => {
    details.forEach((detailClicked) =>{
      if(detailClicked.parentNode.hasAttribute('open')){
        clickedMenu++
      }
    })
    if(clickedMenu >= 1 ){
       details.forEach((detail) =>{
         if(detail.parentNode.hasAttribute('open')){
           detail.parentNode.removeAttribute('open')
            detail.setAttribute('aria-expanded', false);
         }
      }) 
    }
    event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
  });
})

The above JS code will help you prevent opening too many submenus simultaneously. That will make the submenu no longer stack. You can check the results on your storefront.

I hope the above suggestions can help you.

[Instacarts]

Hi BSS-Commerce,

the solution you provide is helping to avoid the stacking of the sub menu.

thanks for your help.

the sub menu is opening only at the top of the main menu. can it open in front of the menu we are clicking

and possible to increase the width of the menu so the each item should be one line. so it help me to reduce the length of the menu.

thanks

Instacarts

[BSS-Commerce]

Hi @Instacarts

The problem of menu stacking has been solved. If you want to change the interface, you just change the CSS of the theme. Please provide us with detailed information about what you want (screenshots). Then, we will check it for you.

[Instacarts]

Hello BSS-Commerce,

as per your request i am adding snapshot to understand my design.

Header 1:

it contain Logo, Search bar and other icons (Cart,Acoount etc)

Header 2:

Main Menu

now we don’t have stacking of the menu but menu always appear on top as above image.

but it should be in front of the menu we clicking. please see the below image.

if you need any clarification feel free to contact me back.

thanks for your help so far. lets work together on this tweaks and we are done with home page.

Thanks again

Instacarts

[Instacarts]

Hello BSS-Commerce,

Can you please update me on the status.

Thanks

Instacarts

[Instacarts]

Hello BSS-Comerce,

are you working on this?

as now desktop site have a menu with no stacking but the mobile menu not working

please look in to it.

@BSS-Commerce

thanks

Instacarts

[BSS-Commerce]

Hi @Instacarts

Please give us a little time so we can check it for you.

[BSS-Commerce]

Hi @Instacarts

We’re sorry for the late reply. To edit the menu, we added this code to your base.css file:

Details[id^="Details-"]{
  position: relative
}

Your menu problem is probably solved

Regarding the problem of editing the header, we think you should find out about the customization part. If you edit the header like the above, we see it will make your theme lose its flexibility. We recommend that you only change the layout based on your theme’s customization.

I hope that this can help you.

[BSS-Commerce]

@Instacarts , besides, it seems that you change the theme to default. Do you want to continue editing? Please let us know if you need further help.

[Instacarts]

@BSS-Commerce

i have tried last couple of days to get connect with you. as you not responding i just for working purpose set theme to default.

hoping you gone through my previous chats . Now after adding all the codes in base.css and Global.js menu stacking is gone in desktop version.

but if you checked the mobile version the whole menu is just vanish.

can you please check this asap. as if site not working on mobile then its lost all its purpose of customization.

thanks

Instacarts

[BSS-Commerce]

Hi @Instacarts

We added the following code at the end of the base.css file:

@media screen and (max-width: 749px) {
  details[open] .header__submenu.list-menu:not(.list-menu--disclosure){
    position: unset;
    background: #fff;
    box-shadow: unset;
    top: unset;
    left: unset;
    width: unset;
    }
    .header__submenu.list-menu--disclosure .icon-caret{
        transform: unset;
    }
    details[open] > .header__menu-item .icon-caret {
        transform: unset;
    }
  Details[id^="Details-"]{
  position: unset
  }
}

The above code is used to display navigation for mobile. We hope it works the way you want.