How To Add Button in Navigation Bar

Highlighted
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
Highlighted
Shopify Partner
1445 195 523

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 and accept as 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
Highlighted
New Member
2 0 0

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

0 Likes
Highlighted
Shopify Partner
1445 195 523

No problem, I'm glad it helped. 

If my solution helped you, please like and accept as 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
Highlighted
Tourist
9 0 0

Hi, 

 

That works great 

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

Thank you 

0 Likes
Highlighted
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
Highlighted
New Member
1 0 0

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

0 Likes
Highlighted
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
Highlighted
New Member
3 0 0

Hi,

 

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

0 Likes