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

Store Design
1

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

2

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.

1 Like
3

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)

4

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

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

6

add class in below code


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

```markup
1 Like
7

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?

8

you forgot to add a class name - second-nav

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

1 Like
9

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

.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; }
10

Can you replace your style with this
1 Like
11

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

12

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.

13

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?

Screenshot Capture - 2024-01-27 - 16-24-19.png
Screenshot Capture - 2024-01-27 - 16-24-19.png834×131 5.17 KB

14

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!

15

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 %}
16

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

17

Where do i add this code ?