Solved

Putting logo and menu in picture

VV97
New Member
5 0 0

Hi, 

 

I would like to put my logo and menu in the picture. Right now my page looks like this:

VV97_0-1709176557415.png

 

And I would like to have it like this:

VV97_1-1709175081172.png

I would like to put the logo and menu the same as the picture. Besides that, i would like, when i scroll down, to maintain the header, but in white. 

 

Would appreciate all the help!!

Thanks in advance! 

 

Accepted Solutions (2)

wo
Shopify Partner
68 19 17

This is an accepted solution.

If your theme does not have relevant settings, the approximate css code to implement is
.header-wrapper{background:transparent;}
#MainContent{transform:translateY(calc(-1 * var(--header-height)))}

 

View solution in original post

wo
Shopify Partner
68 19 17

This is an accepted solution.

.shopify-section-header-sticky.scrolled-past-header{background:#fff;}

View solution in original post

Replies 8 (8)

wo
Shopify Partner
68 19 17

This is an accepted solution.

If your theme does not have relevant settings, the approximate css code to implement is
.header-wrapper{background:transparent;}
#MainContent{transform:translateY(calc(-1 * var(--header-height)))}

 

VV97
New Member
5 0 0

Wow, thank you so much!! And is there a possibility to leave it white, when you scroll down, so you can see the menu¿?

VV97_0-1709176954814.png

 

wo
Shopify Partner
68 19 17

This is an accepted solution.

.shopify-section-header-sticky.scrolled-past-header{background:#fff;}

VV97
New Member
5 0 0

On the other hand, i was wondering how I can keep it still somehow separated, because when i open another page, its covering the information.

VV97_0-1709178287361.png

 

wo
Shopify Partner
68 19 17

Two methods.
1. Add data-template="{{ template }}" to the body tag of theme.liuqid, like this <body data-template="{{ template }}">


css code:
body[data-template="index"] .header-wrapper{background:transparent;}
body[data-template="index"] #MainContent{transform:translateY(calc(-1 * var(--header-height)))}
body[data-template="index"] .shopify-section-header-sticky.scrolled-past-header{background:#fff;}

2,
{% if template.name == 'index' %}
** css code **
{% endif %}

VV97
New Member
5 0 0

Where do I have to put this? I tried and it doesnt change 😞

wo
Shopify Partner
68 19 17

theme.liquid

wo_0-1709259311418.png

 

VV97
New Member
5 0 0

I added the same you send, 

VV97_0-1709260704999.png

and in the CSS: 

VV97_1-1709260792455.png

but still doesn´t work 😞

 

theblessdbrand.com