How to move the whole header logo in narrative theme

Solved
elinaccm
Tourist
6 0 1

I would like the logo name, menu and shopping bag --- the whole header move a bit lower to fit in blank.

May i know if anyone can help ><

Untitled.jpg

 

Thank you so much !

0 Likes
PeanutButter
Shopify Partner
330 66 137

Can you please paste the url to your store?

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
0 Likes
PeanutButter
Shopify Partner
330 66 137

So you have 2 options:

  1. The simplest and the one I would use, is to edit the logo in an image editing program (like photoshop for example) and add some whitespace (or transparent space if image is PNG) on top of the logo.
  2. Second option is to edit your theme's code, the Assets/theme.css.liquid file, search for .site-header__logo-wrapper, around line 6634, and add a margin-top property.

Change this:

 

.site-header__logo-wrapper {
  display: inline-block;
  margin-bottom: 0;
  padding: ($gutter / 2) 0;
  text-align: center;
  line-height: 1.2;
}

 

To this:

 

.site-header__logo-wrapper {
  display: inline-block;
  margin-bottom: 0;
  padding: ($gutter / 2) 0;
  text-align: center;
  line-height: 1.2;
  margin-top: 3px;
}

 

 

Oh, adjust the 3 in margin-top: 3px to the number which positions your logo correctly

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
0 Likes
elinaccm
Tourist
6 0 1

www.vresksliving.com

password : dertew

0 Likes
PeanutButter
Shopify Partner
330 66 137

Hi @elinaccm I see to solutions here:

1. The most simple is to edit the logo in an image processing app (like photoshop) and add the whitespace (or transparent space if it is a PNG) directly to the logo.  With this solution you will not need editing code which can be overwritten if you update the theme

second solution coming in a sec

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
PeanutButter
Shopify Partner
330 66 137

Second solution:

  • Open Assets/theme.css.liquid
  • Search for .site-header__logo-wrapper (around line 6634 in the latest version of the theme)
  • There inside that css class you should add a top margin. To do this, if you now have the following:
.site-header__logo-wrapper {
  display: inline-block;
  margin-bottom: 0;
  padding: ($gutter / 2) 0;
  text-align: center;
  line-height: 1.2;
}

Add a line after the line-height property to add a margin-top like this:

.site-header__logo-wrapper {
  display: inline-block;
  margin-bottom: 0;
  padding: ($gutter / 2) 0;
  text-align: center;
  line-height: 1.2;
  margin-top: 3px;
}


Adjust the 3px to whatever value positions your logo how you desire 

Please like and accept one of my answers if it solves your issue

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
elinaccm
Tourist
6 0 1

Thank you so much !! i tried both methods, both of them works!

Thank you so much once again !:D

0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

Sorry! I didn't read correctly your question, I thought you wanted to move only the logo.

To move also menu and shopping cart, you can use this:

.site-header__wrapper .site-header-sections {
    padding-top: 6px;
}

Add it at the end of Assets/theme.css.liquid 

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
elinaccm
Tourist
6 0 1

No worries ! Thank you so much for your prompt reply and help !

0 Likes