How to move the whole header logo in narrative theme

[elinaccm]

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 ><

Thank you so much !

[PeanutButter]

Can you please paste the url to your store?

[PeanutButter]

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

[elinaccm]

www.vresksliving.com

password : dertew

[PeanutButter]

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

[PeanutButter]

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

[elinaccm]

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

Thank you so much once again !:D

[PeanutButter · 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 

[elinaccm]

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