Solved

Keep Website logo static when scrolling down webpage

DarmorGamz
Excursionist
23 0 5

Hi, I'd like to have my logo stay with the header while customers scroll. Im using the Context theme.

Store Url: NinjaToolSupply.com

Password: password

DarmorGamz_1-1618277571119.png

 

DarmorGamz_0-1618277597378.png

 

Accepted Solution (1)
LitExtension
Shopify Partner
4860 1001 1132

This is an accepted solution.

 Hi @DarmorGamz

Please place this code at the end of the "index.css" file to center your menu when sticking your header:

@media (min-width: 60em) {

  .header--default .header__nav {

    display: block;

    margin: 0 auto;

  }

}

Hope this helps! 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 6 (6)

Muhammad_Ali_S
Shopify Partner
664 121 183

Hi @DarmorGamz ,

Please add a logo for the sticky Header too. Follow the steps:

1. Go to Customize

2. Header

3. Sticky header logo image

Showcase-2020 _  (2).png

Please let me know if you need any assistance.
Good Luck!

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
DarmorGamz
Excursionist
23 0 5

DarmorGamz_0-1618286901739.png

Sticky logo makes it look like this

Muhammad_Ali_S
Shopify Partner
664 121 183

@DarmorGamz 

You need to make some code changes, please add me as a staff so I can fix it for you.

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
LitExtension
Shopify Partner
4860 1001 1132

Hi @DarmorGamz

Please place this code at the end of the "index.css" file to fixed the sticky header on your site.

@media (min-width: 60em) {

    .header-container.is-sticky .header__sticky-logo-wrapper {

        position: relative;

        justify-content: center;

    }

}

Hope this helps.

Screenshot to refer: https://prnt.sc/11c8rko

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
DarmorGamz
Excursionist
23 0 5

DarmorGamz_0-1618386588523.png

How do I keep the header menu centered

 

LitExtension
Shopify Partner
4860 1001 1132

This is an accepted solution.

 Hi @DarmorGamz

Please place this code at the end of the "index.css" file to center your menu when sticking your header:

@media (min-width: 60em) {

  .header--default .header__nav {

    display: block;

    margin: 0 auto;

  }

}

Hope this helps! 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify