How to have two menus at the top of my website

[globeyjr]

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.

[Anonymous · 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]

@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]

Awesome Awesome Awesome. Works on Dawn 14.0 

[DeeLT]

Thanks for this!  I used this to add a new menu to my site, but it isn't centered.  How would I center it? You can see what I mean here. https://8c4caf-34.myshopify.com/blogs/living-towers-blog

[beachjody]

Is there a way to adjust this code so it can be applied to only certain pages? For example, I don't want it in my header, I just want to use it under the header on a few different pages.