I am reaching out for guidance regarding a specific configuration I’m aiming to implement on my Shopify platform. My objective is to create a homepage featuring a full-screen image while retaining the visibility of a transparent menu. Additionally, I am looking to integrate a noticeable announcement bar on the same page.
I possess a visual example of the desired layout, which I’m eager to share with you for inspiration. I would greatly appreciate any assistance, recommendations, or resources that could assist me in achieving this setup within Shopify.
Thank you sincerely for your time and consideration in offering your expertise to aid me in this pursuit.
Warm regards,
(It’s exactly how I want it to be)
HI @chaouchemohamed
Can I give a try? Would you mind to share your Store URL website? with password if its unpublish. Thanks!
Thanks for the info,
check thiso ne.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.header-wrapper.color-background-1.gradient {
background-color: transparent;
}
main#MainContent {
margin-top: -84px;
}
div#Banner-template--20218365804889__74fd9f6d-7765-4032-bfda-085fcaf192ef img {
height: 100vh;
}
@media screen and (max-width: 749px){
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
height: 100vh;
}
}
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Dear Made4uo-Ribe
I hope this message finds you well. Firstly, I want to express my sincerest gratitude for the incredible assistance you provided during the coding process. Thanks to your guidance and expertise, the project is running impeccably—I couldn’t be more grateful for your support.
However, I’ve recently noticed a slight anomaly within the menu layout, as depicted in the attached image. It appears to have taken an unconventional appearance that deviates from its expected design. Additionally, on mobile devices, the image doesn’t fully optimize the screen space.
Your help has been invaluable thus far, and I am confident that with your insight, we can swiftly address these minor inconsistencies. Your continued guidance would be immensely appreciated as we strive to refine the user experience.
Thank you once again for your unwavering support and assistance. I’m truly grateful for your dedication and expertise.
Warm regards, Mohamed
1 Like
You need to increase the margin-top.
main#MainContent {
margin-top: -140px;
}
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
