How To Add Button in Navigation Bar

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
Astronaut
1091 150 274

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

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

0 Likes
Astronaut
1091 150 274

No problem, I'm glad it helped. 

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
1 Like
New Member
3 0 0

Hi, 

 

That works great 

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

Thank you 

0 Likes
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