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

VV97 · ‎02-28-2024

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 · ‎02-28-2024

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 · ‎02-28-2024

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

View solution in original post

wo · ‎02-28-2024

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 · ‎02-28-2024

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

wo · ‎02-28-2024

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

VV97 · ‎02-28-2024

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 · ‎02-28-2024

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 · ‎02-29-2024

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

wo · ‎02-29-2024

theme.liquid

VV97 · ‎02-29-2024

I added the same you send,

and in the CSS:

but still doesn´t work 😞

theblessdbrand.com

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

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

Community Blog Articles