How To Add Button in Navigation Bar

Guis
New Member
2 0 0

Hi all! I hope all is well. 

After a research on Google and several trial and errors I've decided to ask for help. 

I'm using the Debut theme on my Shopify and I'd like to add the a button next to the navigation bar but I can't figure out where to place the code. This is the code I need to include: 

<a href="/collections/all" class="btn hero__btn">
          Ordina il tuo kit
        </a>

And I would like it to look like in the mockup below. 

https://imgur.com/F1L58R0

I tried to add it in the theme.liquid layout and in the header.liquid section but I can't figure out hte ine of code. 

Can somebody help me? 

Thanks in advance, 

Best 

Guis

0 Likes
Ninthony
Shopify Partner
1973 296 782

Go into the snippets folder and open the file "site-nav.liquid". At the verrrrrry bottom, there's a closing ul tag that looks like this

</ul>

Right above that and below the {% endfor %} place your code with a margin of 0 so it aligns correctly.

I don't know how this will effect the site when resized though. It should look like this at the end

  {% endfor %}
  <a href="/collections/all" class="btn hero__btn" style="margin:0;">
          Ordina il tuo kit
  </a>
</ul>

Again, this is assuming you haven't really done anything to Debut's default code. I just tested it in my developer store. It will not be visible on mobile, there's a whole other section for mobile.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Guis
New Member
2 0 0

That worked just fine. Thank you very much for your help! Greatly appreciated. 

0 Likes
Ninthony
Shopify Partner
1973 296 782

No problem, I'm glad it helped. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Avi_Yafe
Tourist
9 0 0

Hi, 

 

That works great 

can you help with how do I add the same for mobile?

Thank you 

0 Likes
digitalchemy
New Member
1 0 0

This helped me but I'm wondering how I could control the size and margin of this button

0 Likes
Lasker
New Member
1 0 0

Is this still valid? I don't see site-nav.liquid in the Brookly theme.  

0 Likes
deani36
New Member
1 0 0

How do you make the button so it is not a solid color but just the text and the box are colored? Also not seeing how to make it appear on mobile. Thanks!

0 Likes
TatianaNic
New Member
3 0 0

Hi,

 

The above just worked well, however how to do the same on mobile drop down menu?

0 Likes
GreenDoorAdmin
Tourist
3 0 1

Hi @Ninthony! I have read through many posts on this subject, many written by yourself, 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 (header, theme.scss) 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!

0 Likes