Re: Dawn Theme - how to make landing page header transparent with white menu over full bleed images

Dawn Theme - how to make landing page header transparent with white menu over full bleed images

0scar
Tourist
10 0 2

Screen Shot 2024-05-26 at 12.03.05 pm.png

 I am using the Dawn theme and would like to make the landing page header transparent (not white) and have full bleed images to the top of the page with white header drop down text and logo in white. Can anyone assist. This will be required on the landing page only.

Replies 4 (4)

conversionist
Shopify Partner
78 8 9

Hey @0scar to make the  header transparent with white menu items and logo over full bleed images

  1. Edit the CSS:

  • Go to your Shopify admin panel.
  • Navigate to Online Store > Themes.
  •  Find the Dawn theme and click Actions > Edit Code.
     In the left-hand sidebar, under Assets, locate and click on base.css

    2 . Add Custom CSS
    :
         At the bottom of base.css, add the following custom CSS:
        

 

.template-index .header-wrapper {
  background: transparent;
}

.template-index .header__menu-item,
.template-index .header__logo {
  color: white;
}
.template-index .header__menu-item:hover,
.template-index .header__submenu-item {
  color: white;
}

.template-index .header--is-sticky {
  background: rgba(0, 0, 0, 0.5); 
}
​

 

      3 . Make sure Full Bleed Images:

           In the same base.css file, add the follo

 

.template-index .main-content {
  padding: 0;
  margin: 0;
}

.template-index .section {
  padding: 0;
  margin: 0;
}


.template-index .image-banner {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

 


Hope this helps

 

 

 

Building 100 Shopify apps for that BMW M5 dream

Follow the journey at https://www.youtube.com/@conversinist
https://conversionist.online/
0scar
Tourist
10 0 2

Thanks @conversionist - I tried this and it didn't work, my theme is in preview, as I still have a live site up with the old theme.

devcoders
Shopify Partner
191 31 48

Hi @0scar 
If you share your store URL and password with me, I will check and provide you with the solution.

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
0scar
Tourist
10 0 2

Sounds good, can you provide your email and I'll set up the access and share it with you