Make Header Transparent - Booster Theme

New Member
6 0 0
Hi

I'm looking to make the header in booster theme transparent. Does someone know how?
0 Likes
Highlighted
Shopify Expert
2486 416 523

Hi @Mbundy 

Send your store url 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Shopify Partner
1141 92 139

Share a store url to better assist

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
New Member
6 0 0
Email send with password & url
0 Likes
New Member
6 0 0
Email send with password & url.
0 Likes
Shopify Partner
1141 92 139

Hi,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.site-header {
background-color: transparent;
position: fixed;
padding: 0 55px;
width: 100%;
z-index: 999;
}

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
Shopify Expert
2486 416 523

Hi @Mbundy 

Add this Css that given by Perennial and also add this Js code in Asset->theme.js file at bottom

$(window).scroll(function(){
  var sticky = $('.site-header'),
      scroll = $(window).scrollTop();
  if (scroll >= $('.announcement-bar').height()) {
$('.site-header').css({"top":"0", "background-color":"white"}); } else {
$('.site-header').css({"top":"25px", "background-color":"transparent"}); } });
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
6 0 0

Thanks!

 

It worked on desktop it looks very nice. But on mobile it looks like this

transparent.png

 

The menu bar and shopping bag are not on the sides. How can I fix this?

0 Likes
Shopify Expert
2486 416 523

Mobile header also looks good, menu bar and cart icon both side separate as it is

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
6 0 0
No I mean like I want the menu bar more to the far left side and the cart icon far right side. Now its like theyre in the middle
0 Likes