How can I line up my logo with the navigation button in the header?

Highlighted
Tourist
3 0 1

It looks ok on desktop but on mobile there's a huge gap between the logo and the Search, Cart, Navigation button.

1 Like
Highlighted
Shopify Partner
5937 872 2004

Hello, @felya 

Welcome to the Shopify community!
and Thanks for your question.


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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
3 0 1

https://www.superwellnessusa.com

It's fine on desktop but on mobile the logo is way above the header and I'd like it lined up.

Thank you.

0 Likes
Highlighted
Explorer
192 47 56

Hi @felya 

Thanks for the post.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){
  .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
  }
  .site-header .grid--table {
      width: auto;
  }
  .site-header .site-header__logo {
      padding: 0;
  }
  .site-header__icons-wrapper{
    margin: 0;
  }
  .site-header__icons{
    padding: 0;
  }
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted

Hello @felya 

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px)
.site-header {
     display: flex;
    flex-wrap: nowrap;

}
.grid.grid--no-gutters.grid--table {
    display: inline-block;
    text-align: center;
    overflow: hidden;
}
}

Hope this is work for you.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
5937 872 2004

Thanks for the details 

can you please provide screenshot?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
3 0 1

It seems to work but it extends the menu very far to the right that you have to scroll to it

0 Likes