Two Menu Bars

Store Design
1

How to add one more menu bar. Our website is https://www.tridentproducts.co.uk/. I want to add more menu bar above the existing menu bar with different Pages and Categories Links.

Menu Bar
Menu Bar1273×811 237 KB

2

Create the second menu first in Content > Menus in your Shopify admin, then open Online Store > Themes > Customize and check your Header section. Some themes like Dawn have a secondary menu slot built in so just assign your new menu there. If yours does not, you would need to edit the header section file in the theme code, which varies enough per theme that it is worth checking your theme’s documentation or support forum for the exact steps.

3

Hi @hamzaabbas,

Go to online store > edit code > in sections folder open announcment-bar.liquid file and before the schema tag add this code


<div class="top-secondary-menu">
  <ul class="secondary-menu-links">
   {% for link in linklists.main-menu.links %}
      <li><a href="{{ link.url }}">{{ link.title }}</a></li>
    {% endfor %}
  </ul>
</div>

<style>
.top-secondary-menu {
  background-color: #f5f5f5; 
  padding: 8px 20px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.secondary-menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 25px;
}
.secondary-menu-links li a {
  text-decoration: none;
  color: #333333; 
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}
.secondary-menu-links li a:hover {
  color: #000000; 
}
</style>

Save

4

Hi @hamzaabbas

Yes this is possible.

You’ll need to add a second header/navigation section above the existing menu. Most Shopify themes support this with a little customization.

Usually there are 2 ways:

  1. Use the built-in announcement/top bar area

  2. Add a completely new custom navigation bar in header.liquid

Best regards,
Devcoder :laptop:

5

@hamzaabbas with code customization you can have second menu bar at the place you need