Help with button alignments on header

Solved
gualbertobrian
Tourist
3 0 0

Hello! I am trying to finish up my new site. I am having trouble trying to move my customer login, cart, and purchase now button to align with the rest of the menu items to the right. I am using the debut theme, by the way! If anyone has any suggestions on how to fix this, thanks so much!

 

help.png

0 Likes
PeanutButter
Shopify Partner
368 67 151

Please share your store's url

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
gualbertobrian
Tourist
3 0 0

Hello! The site is : https://spice-algo.com/

 

I attempted to fix it, but I'd like the "Purchase Now" button to be on the right side, not centered

0 Likes
PeanutButter
Shopify Partner
368 67 151

Hi, I wanted to get your feedback in the approach I used, as it is different from what you were doing.
Instead of trying to move an item in from navigation bar out of the navigation, I added 2 new fields to the header section, one to link a product and one for the button name:

Screen Shot 2021-01-18 at 19.38.12.png

Then with the value from this fields I rendered a button which links to the product selected in the new featured_product field.

What do you think? If this approach is ok with you we can fine tune this so it renders right in all screen sizes

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
gualbertobrian
Tourist
3 0 0

That’s perfect! If I were to add more things onto the header, would that cause the same issue with spacing?

0 Likes
PeanutButter
Shopify Partner
368 67 151

This is an accepted solution.

Your question is too open to be able to answer... define "things"

Also, what do you want to do with the purchase button in mobile?
Currently it is cut, as you can see below.  I could hide it or I could place it below the icons:

Screen Shot 2021-01-18 at 21.06.50.png

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es