Shopify menu and full image

Store Design
1

Hello, Im trying to replicate a header with transparency and footer with just socials. Im trying to recreate this with a full image, but I am having trouble with creating the look. Anyone able to help direct me in the right direction. I am trying to keep the menus consistent from desktop and mobile as well.

Screenshot 2024-08-29 at 12.37.31 PM.png
Screenshot 2024-08-29 at 12.37.31 PM.png936×182 17.8 KB

Screenshot 2024-08-29 at 12.37.20 PM.png
Screenshot 2024-08-29 at 12.37.20 PM.png936×182 134 KB

Here is the preview link - https://hw4w498o58li462e-79080456483.shopifypreview.com

2

Hi @setsx

Do you mean like this?

Made4uoRibe_0-1724958235104.png
Made4uoRibe_0-1724958235104.png1775×802 343 KB

If it is check this one. This is only on the desktop.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.footer {
    background: transparent;
    position: absolute;
    top: 60%; 
    left: 50%;
    transform: translateX(-50%); 
    width: 100%; 
}

.slideshow__text-wrapper.banner__content {
    height: 100vh;
    padding: 5rem; 
    box-sizing: border-box;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

I can help you if you want

4

Thank you, I was able to get that added in and also one for the header below.

{% if template == 'index' %}

<style>
.shopify-section-group-header-group.announcement-bar-section{
height: 5px;
}
.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
}
.header-wrapper .header{
margin-top: 20px;
}
</style>

{% endif %}

Now I am just wondering how to keep the original width of the image in the photo without having it so cropped in.

Thank you for responding and your help as well. It is much appreciated!

5

Hi thank you for your help. I was able to troubleshoot and figured it out :grinning_face: