Add Button in Navigation Bar - Icon Theme

[Poky]

Hi everyone 🙂

I've checked online and then found a similar topic here but I still can't figure out how to add a simple black "buy now" button at the end of the navigation bar (on the right).

I'm using the Icon theme on Shopify and I couldn't find in the snippets folder the file called "site-nav.liquid". I guessed it was the navigation menu so I opened the file called "navigation.liquid" instead and added this code at the very end of the page as suggested in the other post beetween {% endfor %} and </ul>:

<a href="/collections/all" class="btn hero__btn
          Buy Now
        </a>

Unfortunately, it didn't work - the only thing that happened was an additional item in every drop-down menu.

It would be really amazing if anyone could help me.

Thanks,

Daniela

[KetanKumar · Accepted solution]

Hello, @Poky 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

[Poky]

Thanks @KetanKumar! The URL is https://www.framechasers.com/ and you can see the mock-up below. The button should be on the right where there is currently the text in red called "NEW BUTTON HERE". Would this work on desktop only or also on mobile?

Many thanks.

Daniela

[KetanKumar]

Thanks for URL

[KetanKumar]

Hello, @Poky 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

[ecotec]

Hey KetanKumar

I have a similar question:  I am using the warehouse theme and want to add a HTML widget at the side of my nav bar. How do i do that? I suppose after the nav bar loop? This is the code:

  {%- if section.settings.desktop_navigation_layout == 'inline' and navigation_menu.links.size > 0 -%}
    <nav class="nav-bar">
      <div class="nav-bar__inner">
        <div class="container">
          <ul class="nav-bar__linklist list--unstyled" data-type="menu">
            {%- for link in navigation_menu.links -%}
              <li class="nav-bar__item">
                {%- if link.links.size == 0 -%}
                  <a href="{{ link.url }}" class="nav-bar__link link" data-type="menuitem">{{ link.title }}</a>
                {%- else -%}
                  <a href="{{ link.url }}" class="nav-bar__link link" data-type="menuitem" aria-expanded="false" aria-haspopup="true">
                    {{- link.title -}}
                    {%- render 'icon', icon: 'arrow-bottom' -%}
                    {%- render 'icon', icon: 'nav-triangle' -%}
                  </a>

                  {%- capture index -%}desktop-menu-0-{{ forloop.index }}{%- endcapture -%}
                  {%- render 'desktop-menu', menu: link, index: index -%}
                {%- endif -%}
              </li>
            {%- endfor -%}
          </ul>
        </div>
      </div>
    </nav>
  {%- endif -%}
</section>

[KetanKumar]

@ecotec 

not this full code html can be done more code 

[ecotec]

Im sorry i don't understand what you mean? Do you mean i need to show you more of the code? 

I was thinking of making an extra container div to place in nav_bar--inner in which i can place the widget

but i don't know how to appoint it to a certain place in the nav bar..

[KetanKumar]

@ecotec 

yes it can be done some more custamization

[GreenDoorAdmin]

Hi @KetanKumar ! I have read through many posts on this subject and still can't figure it out for my own site. I don't have many of the sections/snippets that people normal insert the code into, so I've tried it in a few spots but it doesn't work. 

I did manage to add a button to the main navigation by placing one into the menu_links.liquid using [class="btn hero__btn"] at line 43, but this is really just a button pasted in with a redirect link.

I prefer your solution where you make one of the menu-links into a button using [li:nth-child(#)] so that changes made in Shopify Admin>Navigation update the button accordingly. 

My website is https://www.thegreendoor.ca/password (login is #2getmein#).

Let me know if you need more info & if you have any suggestions at all. Thank you!

[KetanKumar]

@GreenDoorAdmin 

thanks for post can you please explain what do you want exactly? now i can see button at header