Center menu and logo in mobile header for Debut theme

New Member
6 0 0

I am using Debut theme, and my header looks great on desktop AND on mobile, except on mobile the logo (which is centered on desktop) is on the left side and the hamburger menu is on the right.  I want to stack these centered wiht logo above hamburger, but cannot find where to edit the code for this or how to force alignment. 

 

EXISTING MOBILE HEADER:

HEADER I WANT (if only it was as easy as photoshop!):

 

0 Likes
New Member
1 0 0

I have also been looking for the solution to this, hopefully someone can come up with a solution.

0 Likes
Shopify Partner
1665 51 185

Could you provide example urls?

alternatively hire me directly to fix it, contact info in signature

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
New Member
6 0 0

SIte is not live yet, URL is https://pacifickid.net/ but the live site is a different theme. 

New theme is Debut, any hints on where to put what code to do this would be helpful.  

Thanks!

0 Likes
Shopify Partner
1665 51 185

 live site is a different theme. 

Then you need to provide a preview url ,can't give hints if we can't see the problem. The live themes logo is center on desktop and mobile.

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
New Member
6 0 0

Okay, found the link to share preview - and issue is on mobile only: https://a3obr7lble51x8xf-2767243.shopifypreview.com

0 Likes
Shopify Partner
1665 51 185

To get you in the ballpark the logo needs different css classes , though this only works if you unclamp the height on .site-header class

Logo:

<div class="grid__item small--push-one-quarter small--one-whole medium-up--one-third logo-align--center">

Menu 

<div class="grid__item small--one-whole medium-up--one-third small--text-center site-header__icons site-header__icons--plus" style="
">

To have me fix it email me for a quote. Though really on mobile the first example image looks fine and cuts down scrolling.

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
1 Like
New Member
6 0 0

I'll see if my client wants to pay for this.  It bugs me more than her. :-) Thanks. 

0 Likes
New Member
1 0 0

Hi Paul,

I'm trying to correct this same issue.  Should the coding you entered above correct this?  Did you all have success?  I went to this compnay's mobile site to see if it's been fixed and they never changed it...  I'm also using the Debut theme on Shopify for my boutique and it really bothers me that the logo is left aligned on mobile devices.  Any help is appreciated.

 

Thanks!

Stefanie

0 Likes
Excursionist
19 2 5

Hi @Shea_Davis @gdbarkin and @cstevens4343 what @PaulNewton says did not work. So to solve the logo to center into Debut theme just add this line to file Assets/theme.scss.liquid

@media only screen and (max-width: 749px) { header.site-header.logo--center .medium-up--one-third { left: 33.33333%; } }

If you need also the menu to center on mobile just ask

0 Likes