Adding top navigation with customer log in

Highlighted
Shopify Partner
13 0 0

Hi All,

I am very new to coding and am playing around with the Supply Theme.

I would like to add a top bar that includes navigation as well as the customer log in, account access etc. I have been able to add the following to the theme.liquid:

<div class="top-bar">
        <nav>
          {% for link in linklists[settings.secondary_menu].links %}
          <a href="{{ link.url }}">{{ link.title }}</a>
          {% endfor %}

          {% if shop.customer_accounts_enabled %}
                <span class="site-header--meta-links medium-down--hide">
                  {% if customer %}
                    {% capture first_name %}<a href="/account">{{ customer.first_name }}</a>{% endcapture %}
                    {{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }} &middot; {{ 'layout.customer.log_out' | t | customer_logout_link }}
                  {% else %}
                    {{ 'layout.customer.sign_in' | t | customer_login_link }}
                    {% if shop.customer_accounts_optional %}
                    <span class="site-header--spacer">{{ 'layout.customer.or' | t }}</span>
                    {{ 'layout.customer.create_account' | t | customer_register_link }}
                    {% endif %}
                  {% endif %}
                </span>
              {% endif %}
              </div>

Now I need to know how to add navigation to this as well as what to add to the css. As well as adjust it's vertical position

 

Can anyone help with this please?

 

Regards,

Tamaryn

 

0 Likes
Shopify Staff
Shopify Staff
368 0 39

Hello Tamaryn, Ben here - your Shopify Guru! 

  The supply theme has it's navigation in a snippet called site-nav.liquid. You can include this in your code to recreate the default menu of the theme. You could create a new snippet for your second menu and copy the code from site-nav.liquid into a new snippet and then modify it to use a specific link list that you want to use for the menu. 

The line you would need to change to include a different link list would be on line 7 of the snippet. 

{% for link in linklists.main-menu.links %}

Update this in your new snippet to have the handle of whatever link list you wish to use for the menu. Example:

{% for link in linklists.top-menu-bar.links %}

That would include a link list with a handle of top-menu-bar.

One thing to note is that the site-nav snippet has account login/signup code in it already. Once you have set up your snippet just include it in your top bar:

{% include 'top-site-nav' %}

This assumes you named the snippet top-site-nav.liquid just change that statement to reflect whatever you have named the snippet. 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
Highlighted
Shopify Partner
13 0 0

Hi Benn,

 

I have created a top-site-nav.liquid as you suggested and have change the link to the once that i would like it to link to.

I cannot get it to lign up with the rest of the site though (it's alignment is to the far left of the screen. Also it has pushed the search and cart out of alignment in the header.

Should I copy the site-nav css code and change the .sit-nav to .topbar?

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
368 0 39

Hey Tamaryn, 

  Looks like you just need to add some padding to your css for the div holding the menu. You could copy the css but you will most likely need to tweak it a bit to get it right. Start with copying the css and changing it to target your top-bar.

 

Without seeing your css it is hard to say what is effecting the search bar and add to cart button.

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

 

0 Likes
Highlighted
Shopify Partner
13 0 0

Ok so I have been able to align the topbar with the rest of the page. However i cannot seem to change its colour without changing the background colour of the body. Also the customer log in etc does not appear. I checked and it has nothing to do with font colour. I will play around and will let you know if I still can't get it right.

Thanks for you help so far

0 Likes
Highlighted
Shopify Partner
13 0 0

If i replace the customer/accounts code with the code that appears in the theme.liquid then you see the sign in or create customer account. However I cannot get it to line up with the navigation and align to the right or the bar.

<ul class="site-nav" id="accessibleNav">
  {% unless linklists.main-menu.links.first.url == '/' %}
  <li class="large--hide">
    <a href="/">{{ 'general.breadcrumbs.home' | t }}</a>
  </li>
  {% endunless %}
  {% for link in linklists.information.links %}
    {% assign child_list_handle = link.title | handleize %}
    {% if linklists[child_list_handle].links != blank %}
      <li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}" aria-haspopup="true">
        <a href="{{ link.url }}">
          {{ link.title }}
          <span class="icon-fallback-text">
            <span class="icon icon-arrow-down" aria-hidden="true"></span>
          </span>
        </a>
        <ul class="site-nav--dropdown">
          {% for childlink in linklists[child_list_handle].links %}
            <li {% if childlink.active %}class="site-nav--active"{% endif %}><a href="{{ childlink.url }}">{{ childlink.title | escape }}</a></li>
          {% endfor %}
        </ul>
      </li>
    {% else %}
      <li {% if link.active %}class="site-nav--active"{% endif %}>
        <a href="{{ link.url }}">{{ link.title }}</a>
      </li>
    {% endif %}
  {% endfor %}

              {% if shop.customer_accounts_enabled %}
                <span class="site-header--meta-links medium-down--hide">
                  {% if customer %}
                    {% capture first_name %}<a href="/account">{{ customer.first_name }}</a>{% endcapture %}
                    {{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }} &middot; {{ 'layout.customer.log_out' | t | customer_logout_link }}
                  {% else %}
                    {{ 'layout.customer.sign_in' | t | customer_login_link }}
                    {% if shop.customer_accounts_optional %}
                    <span class="site-header--spacer">{{ 'layout.customer.or' | t }}</span>
                    {{ 'layout.customer.create_account' | t | customer_register_link }}
                    {% endif %}
                  {% endif %}
                </span>
              {% endif %}
            </div>

 

No matter what i try in the css i still cannot change the background without changing the bodies background. 

0 Likes
Highlighted
Shopify Partner
13 0 0

Hi Ben,

I am still not winning with this top bar. here is the code:

theme.liquid:

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}" >

   
    <nav class="header-bar">
    <div class="wrapper"> 
      {% include 'top-site-nav' %}
           </div>

In the top-site-nave.liquid:

<ul class="site-nav" id="accessibleNav">
  {% unless linklists.main-menu.links.first.url == '/' %}
  <li class="large--hide">
    <a href="/">{{ 'general.breadcrumbs.home' | t }}</a>
  </li>
  {% endunless %}
  {% for link in linklists.information.links %}
    {% assign child_list_handle = link.title | handleize %}
    {% if linklists[child_list_handle].links != blank %}
      <li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}" aria-haspopup="true">
        <a href="{{ link.url }}">
          {{ link.title }}
          <span class="icon-fallback-text">
            <span class="icon icon-arrow-down" aria-hidden="true"></span>
          </span>
        </a>
        <ul class="site-nav--dropdown">
          {% for childlink in linklists[child_list_handle].links %}
            <li {% if childlink.active %}class="site-nav--active"{% endif %}><a href="{{ childlink.url }}">{{ childlink.title | escape }}</a></li>
          {% endfor %}
        </ul>
      </li>
    {% else %}
      <li {% if link.active %}class="site-nav--active"{% endif %}>
        <a href="{{ link.url }}">{{ link.title }}</a>
      </li>
    {% endif %}
  {% endfor %}
          
        
         <div class="myaccount">{% if shop.customer_accounts_enabled %}
            {% if customer %}
                <a href="/account"><span>Account</span></a>
            {% else %}
                {{ "<span>Account</span>" | customer_login_link }}
            {% endif %}
        {% endif %}
       </div>

        {% if customer %}    
       <div class="wishlist">
                <a href="/pages/wishlist"><span>Wishlist</span></a></div>
        {% else %}
       <div class="wishlist">{{ "<span>Wishlist</span>" | customer_login_link }}</div>
        {% endif %}
        
       
      <div class="check"><a href="/checkout" title="Checkout"><span>Checkout</span></a></div>
      
               <div class="login"> {% if shop.customer_accounts_enabled %}
                  {% if customer %}
            {{ '<span>Log out</span>' | customer_logout_link }}
            {% else %}
                {{ "<span>Login</span>" | customer_login_link }} <span>or</span> {{ "<span>Register</span>" | customer_register_link }} 
            {% endif %}
        {% endif %}</div>

    </div>
  </div>

 

If i try to copy the css and change it to top-bar then it messes the entire page up.

I have tried using <div class="row"> or even         <div class="grid-item large--one-half text-center large--text-right">

and still no luck. What am i missing?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
368 0 39

Hey Tamaryn, 

 

  You will want to make sure you place this code right below the <body> tag:

<nav class="nav-bar" role="navigation">
    <div class="wrapper">
      {% include 'top-site-nav' %}
    </div>
  </nav>

In your top-site-nav.liquid snippet put the following code:

<ul class="site-nav" id="accessibleNav">
  {% unless linklists.top-nav.links.first.url == '/' %}
  <li class="large--hide">
    <a href="/">{{ 'general.breadcrumbs.home' | t }}</a>
  </li>
  {% endunless %}
  {% for link in linklists.top-nav.links %}
    {% assign child_list_handle = link.title | handleize %}
    {% if linklists[child_list_handle].links != blank %}
      <li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}" aria-haspopup="true">
        <a href="{{ link.url }}">
          {{ link.title }}
          <span class="icon-fallback-text">
            <span class="icon icon-arrow-down" aria-hidden="true"></span>
          </span>
        </a>
        <ul class="site-nav--dropdown">
          {% for childlink in linklists[child_list_handle].links %}
            <li {% if childlink.active %}class="site-nav--active"{% endif %}><a href="{{ childlink.url }}">{{ childlink.title | escape }}</a></li>
          {% endfor %}
        </ul>
      </li>
    {% else %}
      <li {% if link.active %}class="site-nav--active"{% endif %}>
        <a href="{{ link.url }}">{{ link.title }}</a>
      </li>
    {% endif %}
  {% endfor %}

  {% if shop.customer_accounts_enabled %}
    {% if customer %}
      <li class="customer-navlink large--right"><a href="/account">{{ 'layout.customer.view_account' | t }}</a></li>
      <li class="customer-navlink large--right">{{ 'layout.customer.log_out' | t | customer_logout_link }}</li>
    {% else %}
      <li class="customer-navlink large--right">{{ 'layout.customer.sign_in' | t | customer_login_link }}</li>
      {% if shop.customer_accounts_optional %}
      <li class="customer-navlink large--right">{{ 'layout.customer.create_account' | t | customer_register_link }}</li>
      {% endif %}
    {% endif %}
  {% endif %}
</ul>

I have modified the snippet code to include a different link list then your main menu. I also changed the helper classes on the customer login items they where hidden by default. Just incase you wish to have two separate menu bars. This code will include a link list with the handle top-nav:

I am not sure what you are using for a wish list app but you will most likely be able to incorporate that into this snippet. 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

 

0 Likes
Highlighted
Shopify Partner
13 0 0

You are a superhero Ben and have made my week. Thank you.

One last question, is there any reason why the navigation part's background would be appearing as a different colour to the customer links? Where is the css could i check this?

0 Likes
Highlighted
Shopify Partner
13 0 0

Hi Ben, 

Thank you again for your help with the top nav bar. 

I was wondering if you could assist with one more thing. I have created a multi-level drop down menu in my theme and it works well. What it does currently is when you hover over main menu, you see the sub menue and its "sub-menus" listed below them. So it ends up becoming one long list. 

This is the code thus far:

<ul class="site-nav" id="accessibleNav">
  {% unless linklists.main-menu.links.first.url == '/' %}
  <li class="large--hide"><a href="/">Home</a></li>
  {% endunless %}
  {% for link in linklists.main-menu.links %}
  {% assign child_list_handle = link.title | handleize %}
  {% if linklists[child_list_handle].links != blank %}
  <li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}" aria-haspopup="true">
    <a href="{{ link.url }}">
      {{ link.title }}
      <span class="icon-fallback-text">
        <span class="icon icon-arrow-down" aria-hidden="true"></span>
      </span>
    </a>
    <ul class="site-nav--dropdown">
      {% for child_link in linklists[child_list_handle].links %}
      {% assign grand_child_list_handle = child_link.title | handle %}
      {% if linklists[grand_child_list_handle] and linklists[grand_child_list_handle].links.size > 0 %}
      <li class="{% if childlink.active %}site-nav--active{% endif %} grand">
        <a href="{{ child_link.url }}">
          {{ child_link.title }}
          <span class="icon-fallback-text">
            <span class="icon icon-arrow-down" aria-hidden="true"></span>
          </span>
        </a>
        <ul class="site-nav--dropdown--sub">
          {% for grand_child_link in linklists[grand_child_list_handle].links %}
          <li>
            {{ grand_child_link.title | link_to: grand_child_link.url }}
          </li>
          {% endfor %}
        </ul>
      </li>
      {% else %}
      <li>
        {{ child_link.title | link_to: child_link.url }}
      </li>
      {% endif %}
      {% endfor %}
    </ul>
  </li>
  {% else %}
  <li {% if link.active %}class="site-nav--active"{% endif %}>
    <a href="{{ link.url }}">{{ link.title }}</a>
  </li>
  {% endif %}
  {% endfor %}

 

What I would like is to have the "grand-child list" appear to the right of the "child list" when you hover over the child list. I have tried multiple variations of the code to get it to do this, however any changes messes with the site. 

I have attached an example of the type of dropdown i am looking for:

 

0 Likes