Change Nav from Sidebar to List (Highlight Theme)

[hannahdossary]

Hey Shopify Community,

Hoping someone can help.  I purchased the Highlight theme and annoyingly found out afterwards that the nav menu only comes in one option(!)

It always shows as a hamburger icon even on desktop, displaying the menu in a sidebar. This is great for mobile but really annoying for desktop.

Does anyone know how I can edit the header.liquid code so that it displays as the usual listed pages for desktop?

Website is: https://safety-net-solutions-uk.myshopify.com/ 

Password: netsafety

Thank you SOO much!

[koravski]

Hey Hannahdossary,

Here is a simple example using only html and liquid. You will need to style it and probably use some JS.

<ul class="parent">
{% for link in linklists.main-menu.links %}
<li {% if link.active %}class="active {% if link.child_active %}child-active{% endif %}"{% endif %}><a href="{{ link.url }}">{{ link.title }}</a>
{% if link.links != blank %}
  <ul class="child">
    {% for child_link in link.links %}  
    <li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}><a href= "{{ child_link.url }}">{{ child_link.title }}</a>
    {% if child_link.links != blank %}
      <ul class="grandchild">
      {% for grandchild_link in child_link.links %}  
        <li {% if grandchild_link.active %}class="active {% if grandchild_link.child_active %}child-active{% endif %}"{% endif %}><a href= "{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li>
      {% endfor %}
      </ul>
    {% endif %}   
    </li>
    {% endfor %}
  </ul> 
{% endif %} 
</li>
{% endfor %}
</ul>

[hannahdossary]

Thank you @koravski! that was so quick

I'll have a play with the code and styling it. I wondered if you knew how i could add a %if code to this or the sidebar menu to specify that it should only show up on mobile  vs desktop?

[koravski]

Sure, you will need two css properties.

This is for your mobile menu. It will hide it above width 768px.

@media screen and (min-width: 768px) {
button#menu-open-button {
    display: none;
}
}

 
Your desktop menu will be hidden under 768px :

@media screen and (max-width: 768px) {
.desktopClasss {
    display: none;
}
}

Change "desktopClasss" with the class of your container with  the desktop menu.

[hannahdossary]

amazing thank you @koravski . I'll put it in and see if it all works 🙂