Creating a Dropdown Navbar in Shopify with HTML/CSS

Creating a custom navbar in your Shopify theme is easier than you’d think! In this intro I’m going to show you how to create a simple, mobile responsive header for your Shopify theme as a starting point for any custom features you would like to build out.

Github Code: https://github.com/ndrishinski/blogs/tree/master/dropdown-navbar

Prefer Video?

Enjoy, otherwise read on!

Create Dropdown Menu in Shopify Dashboard

Within the Shopify dashboard, under Online Store -> Navigation -> Main Menu we have the ability to customize our navigation structure. By dragging items to the right and under other menu items, we can nest them beneath as ‘children’.

Now we can reference this structure in our Liquid file and display the contents like so.

Create our Custom Header File and CSS file

Firstly, let’s create our section file and CSS file. Under the sections directory create a file named custom-header.liquid. Then under the assets directory, create a file called custom-nav.css.liquid. We’ll come back and add our code here in a moment, but first let’s configure our theme to show this new section.

Display our New Header in theme.liquid

In theme.liquid we first need to paste a few link references.

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
  <head>
    ....
    <link href="{{ 'custom-nav.css' | asset_url }}" rel="stylesheet" type="text/css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    ...

The following scripts reference our new stylesheet as well as other dependencies for Google Fonts/Icons that we will be using.

Next within header-group.liquid file, let’s remove all the content there and add the configuration for our new file:

{
  "name": "HEADER STUFF",
  "type": "header",
  "sections": {
    "header": {
      "type": "custom-header",
      "settings": {
      }
    }
  },
  "order": [
    "header"
  ]
}

Now any HTML/Liquid we add to our custom-header file will appear in our theme preview.

Add HTML

Now we can add the bulk of our HTML/Liquid code:

<header id="vl-custom-header">
  <h1 class="logo-header" id="h1-logo-header">NICK'S SHOP</h1>
  <nav class="navbar">
    <ul class="nav-list">
      {%- for link in linklists.main-menu.links -%}
        <li class="nav-item dropdown">
          <div class="nav-label">
            <a href="{{ link.url }}">{{ link.title }}</a>
            <span class="material-symbols-outlined">
              chevron_right
            </span>
          </div>
          <div class="dropdown-content">
            {%- for childlink in link.links -%}
              <a href="#">{{ childlink.title }}</a>
              {% if forloop.index != link.links.size %}
              <div class="dropdown-menu-item"></div>
              {% endif %}
            {% endfor %}
          </div>
        </li>
      {% endfor %}
      <li class="nav-item dropdown shopping_cart_icon">
        <span class="material-symbols-outlined" id="shopping_cart">
          shopping_cart
        </span>
      </li>
    </ul>
  </nav>   

  <!-- MOBILE STUFFF -->

  <nav class="mobile-nav">
    <span class="material-symbols-outlined" id="hamburger-menu">
      menu
    </span>
  </nav>
</header>

<div class="mobile-nav-container">
  <ul class="nav-list-mobile">
    {%- for link in linklists.main-menu.links -%}
    <li class="nav-item dropdown">
      <div class="nav-label">
        <a href="{{ link.url }}">{{ link.title }}</a>
        <span class="material-symbols-outlined">
          chevron_right
        </span>
      </div>
      <div class="dropdown-content">
        {%- for childlink in link.links -%}
          <a href="#">{{ childlink.title }}</a>
          {% if forloop.index != link.links.size %}
            <div class="dropdown-menu-item"></div>
          {% endif %}
        {% endfor %}
      </div>
    </li>
    {% endfor %}
  </ul>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#hamburger-menu').onclick = function() {
      const container = document.querySelector('.mobile-nav-container')
      container.classList.toggle('hide')
    }
  })
</script>    

{% schema %}
  {
    "name": "custom-header",
    "settings": []
  }
{% endschema %}

There is a lot going on here. First you’ll notice the <span> tags that we are using to reference our Google Icons. Then you’ll notice some liquid forloop’s which we are using to display each main link, and it’s nested links which will appear in the dropdown portion (see above section for configuration of menu in Shopify dashboard).

Additionally there is a separate chunk of HTML that we are using for mobile. This will make more sense when we add media queries to our CSS.

If we save the current changes, we’ll see some ugly HTML displayed on our theme preview.

Add styles

Visit here to get the CSS (because it is too long to paste here). But the main takeaways are the reference to our icons, as well as our media queries to conditionally show our hamburger menu and nav menu on smaller screens. We should also see a much better looking desktop menu after saving these changes.

Conclusion

After adding just a bit of HTML/CSS and some configuration we can display our own custom navbar in our Shopify theme! I hope this gets you started towards any custom header you plan to build.