How can I maximize the logo, make the header fixed, and a bit transparent background when scrolling

Janamir
Excursionist
91 0 24

How can I maximize the logo and minimize the right side menus in mobile view. Then make the header fixed and a bit transparent background when scrolling down on desktop and mobile view like on this website: https://us.princesspolly.com/. I am using in Narrative Theme. Please help.

Store: https://butterflight-boutique.myshopify.com/

password: butt3rfl1ght!

phone-menu.PNG

 

0 Likes
Natztech
Shopify Partner
894 242 661

 

 

hello @Janamir  

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){
.site-header__logo-image {
    max-height: 75px !important ;
    width: 138px !important;
}

.site-header__section--button >a >svg{
    width: 20px !important ;
    height: 40px !important ;
}
.site-header__section--button >a >svg.icon-search{
    width: 20px !important;
    height: 20px !important;
    margin-left: 18px  !important;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
Janamir
Excursionist
91 0 24

@Natztech that worked. How can I also target the menu burger in the left as I want to move it a bit? Also, I want the header the to be fixed and partially having a transparent background when scrolling down link on this website:  https://us.princesspolly.com/

0 Likes
Natztech
Shopify Partner
894 242 661

hello @Janamir  

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

 

 #shopify-section-header {
    position: -webkit-sticky  !important;
    position: sticky  !important;
    top: 0;
    z-index: 9 !important;
}
@media only screen and (max-width: 749px){
.header .header__sticky .header__social{
      margin-left: 12px;
}
}

 

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store