How can I add a second menu to my website header?

[urbantis]

Hi, I would like to add a second menu on header like this picture

https://ibb.co/QYzCXjv

To this website

isatwelding.myshopify.com/

password 1

Thank you for your input

[saurav9005]

First create a menu from online store > Navigation

and then edit the {% for link in linklists.main-menu.links %} navigation name

  {% for  link in linklists.navigation-name-you-created.links %}
    - {{ link.title }}

        {% if link.links.size > 0 %}
        

            {% for child_link in link.links %}
              - {{ child_link.title }}

                    {% if child_link.links.size > 0 %}
                

                        {% for grandchild_link in child_link.links %}
                          - {{ grandchild_link.title }}
                    
                        {% endfor %}
                
                    {% endif %}
            
            {% endfor %}
        
        {% endif %}
    
  {% endfor %}

And whereever you want to show this header - put in that section.

[urbantis]

Thanks for your reply, I added the code to g_announcementbar.liquid, but it doesn’t show nice and aligned to the right like the picture, what am I doing wrong? It also makes me write something on the announcement bar or it won’t show (I wrote a line)

[saurav9005]

Replace the class name as mentioned in below code, this will help to get similar to you main navigation

[urbantis]

Much better, could I please have them aligned to the right like the picture? https://ibb.co/QYzCXjv

[saurav9005]

add class in below code

after the closing </main-navigation>, paste this below code

```markup

[urbantis]

I added the code

<style>
.shopify-section .#main-navigation.second-nav {
width: 100%;
    display: inline-block;
    background: #081142;
    color: #fff;
}
.shopify-section .#main-navigation.second-nav  ul {
width: 450px;
    float: right;
    padding: 10px 0;
}
.shopify-section .#main-navigation.second-nav  ul li {
border-right: 1px solid #fff;
}

.shopify-section .#main-navigation.second-nav  ul li a {
    padding: 5px 24px 0 0 !important;
    font-weight: bold;
}
</style>

after

<main-navigation class="#main-navigation @position:secondary">
<ul class="#main-navigation-list">
  {% for  link in linklists.navigation-name-you-created.links %}
    <li class="#main-navigation-list">
      <a class="#main-navigation-link" href="{{ link.url }}">{{ link.title }}</a>

      {% if link.links.size > 0 %}
        <ul class="menu dropdown-child">
          {% for child_link in link.links %}
            <li class="menu-link">
              <a href="{{ child_link.url }}">{{ child_link.title }}</a>

              {% if child_link.links.size > 0 %}
                <ul class="menu dropdown-grandchild">
                  {% for grandchild_link in child_link.links %}
                    <li class="menu-link">
                      <a href="{{ grandchild_link.url }}">{{ grandchild_link.title }}</a>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>
</main-navigation>

but nothing changed, did I add it in the wrong place?

[saurav9005]

you forgot to add a class name - second-nav

unless you don’t add that, you will not see any changes

[urbantis]

I see, I still do not see a change, now it looks like this:

{% for link in linklists.top.links %}
• {{ link.title }}

  {% if link.links.size > 0 %}

  {% for child_link in link.links %}
  • {{ child_link.title }}

    {% if child_link.links.size > 0 %}

    {% for grandchild_link in child_link.links %}
    • {{ grandchild_link.title }}
    {% endfor %}
    {% endif %}
  {% endfor %}
  {% endif %}
{% endfor %}

.shopify-section .#main-navigation.second-nav { width: 100%; display: inline-block; background: #081142; color: #fff; } .shopify-section .#main-navigation.second-nav ul { width: 450px; float: right; padding: 10px 0; } .shopify-section .#main-navigation.second-nav ul li { border-right: 1px solid #fff; } .shopify-section .#main-navigation.second-nav ul li a { padding: 5px 24px 0 0 !important; font-weight: bold; }

[saurav9005]

Can you replace your style with this

[urbantis]

Thank you very much for taking the time to help me!

[Capsulet]

Hi there! We are looking to do a similar thing but so far not successful. What did you do about the ‘second-nav’ as this doesn’t seem to make any difference? Currently, we just have bullet point links in the top left corner as a list from our menu we called ‘new’, which was inserted into the ‘navigation-name-you-created’ section of code. We put this at about line 56 of the announcement-bar.liquid in our dawn theme.

[PTherapy]

Im also invested in this thread/solution. I would like to add this to my header, but I have 0 code editing experience. I find the solution a little vague for my lack of experience. Am I correct to replace the following with the “accepted solution” noted above?

[Capsulet]

Hi PTherapy. I’m not too sure to be honest! We ended up going down a different route in the end, best of luck with it!

[saurav9005]

Hi PTherapy

You need to have some kind of coding experience to do so.

To Create a New Menu and placed in website.

1. Online store > Navigation

2. create new menu and navigation (Home, about etc…)

3. In right side - Handle, copy the name of menu

4. Replace the your menu name in below code where it say “navigation-name-you-created”

5. and to make beautiful need to add css

  {% for  link in linklists.navigation-name-you-created.links %}
    - {{ link.title }}

        {% if link.links.size > 0 %}
        

            {% for child_link in link.links %}
              - {{ child_link.title }}

                    {% if child_link.links.size > 0 %}
                

                        {% for grandchild_link in child_link.links %}
                          - {{ grandchild_link.title }}
                    
                        {% endfor %}
                
                    {% endif %}
            
            {% endfor %}
        
        {% endif %}
    
  {% endfor %}

[Ahmedsalah89]

i want to add this menue header appear in one collection page , can i know wherer add this

[hof2021]

Where do i add this code ?