Debut theme - Resize LOGO on scroll

LucentLanterns
Tourist
5 0 3

Hi,

I am using the debut theme and have a fixed header with logo. I am also using the 'back to top' button on scroll.

I would to resize my logo image along with the scroll. Can the following code in 'theme.css' be changed along with scrolling, change the width to 50%.

.site-header__logo-image img {
width: 100%;}

Thank you.

0 Likes
UmairA
Shopify Partner
586 65 103

@LucentLanterns!

Yes, you can change the value of this code using JQuery. Are you able to provide your store URL so I can take a better look?

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gmail.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
 

Not sure if it is what you want, but please see my code below (I am using debut theme)

ezgif-4-b8f1a2301a8a.gif

Add the following code to theme.scss.liquid

 

.small-header{
    background-color: #bbb !important;  /* you can remove it or change the color if you already have it in your theme */
	.site-header__logo {
        margin-bottom: 0 !important;
        img{
      	    height: 50px !important;  /* you can change the height to what ever you want */
        }
    }
}

 

 

Add the following code to the end of theme.js

 

window.onscroll = function() {
   // You can change the height for your need
    if (document.body.scrollTop > 700 || document.documentElement.scrollTop > 700) {
      $(".site-header").addClass("small-header")
    } else {
      $(".site-header").removeClass("small-header")
    }
  }

 

 

 

 

 

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
LucentLanterns
Tourist
5 0 3

Hi,

@UmairAThe website is www.lucentlanterns.com. Pass: test123

@DeepCodeThe code does not seem to change anything.

 

0 Likes
LucentLanterns
Tourist
5 0 3

Hi,

I still haven't been able to resize the logo with scroll. Any suggestions, please?

@KetanKumarwould it be possible for you to please give some suggestions.

KetanKumar
Shopify Partner
14220 1656 5116

@LucentLanterns 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
LucentLanterns
Tourist
5 0 3

Hi @KetanKumar 

The website is www.lucentlanterns.com. Pass: test123

WinkyApps
Explorer
50 13 12

I can see that the Collections item title is hidden on your store now

Before

WinkyApps_1-1611507140937.png

 

Now

WinkyApps_0-1611507083660.png

Do you want to remove the "Collections" Heading? or the Item titles you had on each collection item?

 

Did my answer work for you? Please drop a Like and Mark it as Accepted.
If you need further help or want to get something custom built for your Shopify store, then feel free to mail our team on winkyapps18@gmail.com
Happy to help.
0 Likes
KetanKumar
Shopify Partner
14220 1656 5116

@LucentLanterns 

sorry your theme doesn't all on scroll different class so

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
LucentLanterns
Tourist
5 0 3

Hi @KetanKumar 

I seem to have figured out how to implement it into the 'back to top' script.