Skip to content

Instantly share code, notes, and snippets.

@Hujjat
Created November 14, 2019 23:04
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hujjat/6fd151fcdc3d8f55646da141dc746a1d to your computer and use it in GitHub Desktop.
Save Hujjat/6fd151fcdc3d8f55646da141dc746a1d to your computer and use it in GitHub Desktop.
Bootstrap 4 navbar for Shopify Theme
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% for link in linklists[section.settings.menu].links %}
{% if link.links != blank %}
<li class="nav-item dropdown">
<a href="{{ link.url }}" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ link.title }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% for childlink in link.links %}
<a href="{{ childlink.url }}" class="dropdown-item">
{{ childlink.title }}
</a>
{% endfor %}
</div>
</li>
{% else %}
<li class="nav-item">
<a href="{{ link.url }}" class="nav-link">
{{ link.title }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</nav>
@ponsivadev
Copy link

How to add an "active" class to this navbar?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment