How can I center my logo and move the burger menu to the left on mobile?

[Leadermar]

Hello,

I am using the Palo Alto theme and I would like to make the following changes to the header menu on mobile:

-Centre my logo (vs. on the left)

-Move the burger menu on the left (vs. on the right)

Would be great to know which code I need to amend / add to do that.

Thank you for your help.

Regards,

Lea.

[Vikas_Chovatiya]

Hi @Leadermar

Thanks Welcome to the Shopify community!

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

.site-header__logo {
    position: absolute;
    right: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    top: 50%;
}
.site-header__logo-link {
    display: inline-block;
    width: 100%;
    padding: 0;
}
button.js-drawer-open-left {
    position: absolute;
    left: 0;
}

[Leadermar]

Hello @Vikas_Chovatiya ,

Thank you so much for your answer.

I tried to add this code at the bottom of file but doesn’t seem to work - not sure if I did it properly?

Thank you!

  
  
  
  
    
    

    {%- if settings.favicon != blank -%}
      
    {%- endif -%}

    {% comment %} Title and description {% endcomment %}
    

    {%- if page_description -%}
    
    {%- endif -%}

    {% comment %} Helpers {% endcomment %}
    
    

    {{ content_for_header }}

    {% comment %} CSS {% endcomment %}
    {{- 'theme.scss.css' | asset_url | stylesheet_tag -}}
  

{%- capture body_class -%}
template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} no-outline
{% if customer %} customer-logged-in{% endif %}
{% if settings.show_spacer_lines %} body--show-spacer-lines{% else %} body--hide-spacer-lines{% endif %}
{% if settings.quick_button == 'buy' %} quick-buy-enabled{% elsif settings.quick_button == 'view' %} quick-view-enabled{% endif %}
{% unless settings.show_buttons_animation %} no-button-animation{% endunless %}
{%- endcapture -%}

  
    

    {{ 'general.accessibility.skip_to_content' | t }}

    {%- section 'popup' -%}
    {%- section 'announcement-bar' -%}
    {%- section 'header' -%}

    

      
      {%- section 'footer' -%}

    

    {%- render 'scripts' -%}
    
    .site-header__logo {
    position: absolute;
    right: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    top: 50%;
}
.site-header__logo-link {
    display: inline-block;
    width: 100%;
    padding: 0;
}
button.js-drawer-open-left {
    position: absolute;
    left: 0;
}

.site-header__logo {
    position: absolute;
    right: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    top: 50%;
}
.site-header__logo-link {
    display: inline-block;
    width: 100%;
    padding: 0;
}
button.js-drawer-open-left {
    position: absolute;
    left: 0;
}

[Vikas_Chovatiya]

Hi @Leadermar

You add the wrong place please add this file theme.scss.liquid

[Leadermar]

@Vikas_Chovatiya

Ah yes indeed! Thank you, it’s working now!

Just one more thing, when I click on the menu, the burger menu is still displaying on the right side. Is there a way I can have the burger menu on the left side as well?

Thank you so much for your help,

Lea.

[Vikas_Chovatiya]

Hi @Leadermar

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

.js-drawer-open-left .is-moved-by-drawer {
    -moz-transform: translateX(300px);
    -o-transform: translateX(300px);
    -ms-transform: translateX(300px);
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
}
.js-drawer-open-left .drawer--left {
    display: block;
    -moz-transform: translateX(300px);
    -o-transform: translateX(300px);
    -ms-transform: translateX(300px);
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
}
#NavDrawer button {
    float: left;
    right: 0;
    left: 0;
    padding: 0;
}
.drawer--left {
    width: 300px;
    right: auto;
    border-left: 1px solid #f2f2f2;
    left: -300px;
    border-right: 2px solid #000;
}

[Leadermar]

It’s working perfectly fine now, thank you so much for your help @Vikas_Chovatiya !

[Leadermar]

Hi @Vikas_Chovatiya ,

Actually I noticed that I have now 2 logos on my mobile header (except for the home page)

[Vikas_Chovatiya]

Hi @Leadermar

It can be done by doing some code customization.
Please take the help of a developer and hire Shopify Expert or me

[Leadermar]

Hi @Vikas_Chovatiya ,

Actually it doesn’t work and impacted my desktop header

Thanks ,
Lea.