Solved

Add a second menu on header

urbantis
Shopify Partner
186 0 55

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

Accepted Solution (1)
saurav9005
Shopify Partner
99 14 25

This is an 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>

 

please hit Like and Mark as Solution, If this answer solve your problem.  If you find my reply helpful, a small Coffee Tip would make my coding heart soar!

View solution in original post

Replies 14 (14)

saurav9005
Shopify Partner
99 14 25

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. 

please hit Like and Mark as Solution, If this answer solve your problem.  If you find my reply helpful, a small Coffee Tip would make my coding heart soar!
urbantis
Shopify Partner
186 0 55

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
Shopify Partner
99 14 25

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>

 

please hit Like and Mark as Solution, If this answer solve your problem.  If you find my reply helpful, a small Coffee Tip would make my coding heart soar!
urbantis
Shopify Partner
186 0 55

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

saurav9005
Shopify Partner
99 14 25

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>

 

please hit Like and Mark as Solution, If this answer solve your problem.  If you find my reply helpful, a small Coffee Tip would make my coding heart soar!
urbantis
Shopify Partner
186 0 55

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
Shopify Partner
99 14 25

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

please hit Like and Mark as Solution, If this answer solve your problem.  If you find my reply helpful, a small Coffee Tip would make my coding heart soar!
urbantis
Shopify Partner
186 0 55

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
Shopify Partner
99 14 25

This is an 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>

 

please hit Like and Mark as Solution, If this answer solve your problem.  If you find my reply helpful, a small Coffee Tip would make my coding heart soar!
urbantis
Shopify Partner
186 0 55

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

Capsulet
New Member
4 0 0

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
Visitor
2 0 0

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

Capsulet
New Member
4 0 0

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
Shopify Partner
99 14 25

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>

 

 

please hit Like and Mark as Solution, If this answer solve your problem.  If you find my reply helpful, a small Coffee Tip would make my coding heart soar!