How can I integrate my logo and menu into a picture?

[VV97]

Hi,

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

And I would like to have it like this:

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!

[wo]

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]

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]

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.

[wo]

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

[wo]

Two methods.

1. Add data-template=“{{ template }}” to the body tag of theme.liuqid, like this

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]

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

[wo]

theme.liquid

[VV97]

I added the same you send,

and in the CSS:

but still doesn´t work

theblessdbrand.com