Make Header Transparent - Booster Theme

Highlighted
New Member
6 0 0
Hi

I'm looking to make the header in booster theme transparent. Does someone know how?
0 Likes
Shopify Expert
2504 419 528

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
1146 93 141

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
1146 93 141

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
2504 419 528

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
2504 419 528

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