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

<ul class="menu">
  {% for  link in linklists.navigation-name-you-created.links %}
    <li class="menu-link">
      <a 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>

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

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

[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

<main-navigation class="#main-navigation second-nav @position:secondary">

after the closing </main-navigation>, paste this below 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>

[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

<main-navigation class="#main-navigation second-nav @position:secondary">

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:

<main-navigation class="#main-navigation second-nav @position:secondary">

<ul class="#main-navigation-list">
{% for link in linklists.top.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>

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

[saurav9005 · Accepted solution]

Can you replace your style with this 

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

[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

<ul class="menu">
  {% for  link in linklists.navigation-name-you-created.links %}
    <li class="menu-link">
      <a 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>

[Ahmedsalah89]

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