Solved

How to have two menus at the top of my website

globeyjr
Visitor
3 0 1

Screenshot 2023-03-14 at 12.00.28 PM.png

 

I currently have my header menu, which is left of the logo, and I am trying to get my main menu to be directly below that. I figure the only way is with coding which i am struggling to figure out how to do. I have attached an image of what I have and what I am trying to do with just typing it in below. Any help is much appreciated.

Accepted Solution (1)

Not applicable

This is an accepted solution.

hey @globeyjr add this code inside that custom liquid box:

<div class="c-menu2">
  {% for link in linklists.new.links %}
    <a class="header__menu-item list-menu__item link link--text focus-inset" href="{{ link.url }}">{{ link.title }}</a>
   {% endfor %}
</div>
<style>
  .c-menu2 {
    display: flex;
  }

  @media (max-width: 989px) {
    .c-menu2 {
       flex-direction: column;
       align-items: center;
        /*display: none; */
     }
   }
</style>

Then go to your Shopify backend >>> Online store >>> navigation. Make a new menu called "new" & add in your links as normal.

 

This code will currently center those links vertically on mobile. But if you want that menu hidden on mobile then just un-comment that "display: none" line in that code snipper & delete the 2 lines above it.

View solution in original post

Replies 3 (3)

Not applicable

This is an accepted solution.

hey @globeyjr add this code inside that custom liquid box:

<div class="c-menu2">
  {% for link in linklists.new.links %}
    <a class="header__menu-item list-menu__item link link--text focus-inset" href="{{ link.url }}">{{ link.title }}</a>
   {% endfor %}
</div>
<style>
  .c-menu2 {
    display: flex;
  }

  @media (max-width: 989px) {
    .c-menu2 {
       flex-direction: column;
       align-items: center;
        /*display: none; */
     }
   }
</style>

Then go to your Shopify backend >>> Online store >>> navigation. Make a new menu called "new" & add in your links as normal.

 

This code will currently center those links vertically on mobile. But if you want that menu hidden on mobile then just un-comment that "display: none" line in that code snipper & delete the 2 lines above it.

globeyjr
Visitor
3 0 1

@Anonymous Awesome that worked!! I have the menu meant to be a drop down, how do I incorporate that into it? Also how do I centre the menu on the computer display? Again thank you for your help!!!

Shopeezoo
New Member
7 0 0

Awesome Awesome Awesome. Works on Dawn 14.0