To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

How to make Sticky Header persistent

BoogieThreads
Excursionist
78 0 7

Hello! 

I am setting up a new theme - Dawn.

https://themes.shopify.com/themes/dawn/styles/default/preview?price%5B%5D=free&surface_inter_positio...

I would like to make the sticky header always visible, as opposed to the current header which only shows upon scrolling up. 

How would I accomplish this?

Thanks!

Replies 9 (9)
BoogieThreads
Excursionist
78 0 7

Yes please do. What do I need to change? Thank you

BoogieThreads
Excursionist
78 0 7

It seems like I need to chagne something in header.liquid but I want to be sure of what

PageFly-Victor
Shopify Partner
5515 962 2311

@BoogieThreads 

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

 

Add this css at the bottom

Online Store->Theme->Edit code

assets->base.css

 

.announcement-bar__message {

margin-bottom: -11px !important;

}

 

.header {

    position: fixed !important;

    top: 0px !important ;

    background-color: #fff !important;

    width: 100% !important;

}

 

Best regards,

PageFly

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

BoogieThreads
Excursionist
78 0 7

Thank you for your assistance. Unfortunately, that seemed to have broken the header in some way:

BoogieThreads_0-1663740268078.png

 

PageFly-Victor
Shopify Partner
5515 962 2311

@BoogieThreads can you send me the url of this site?

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

BoogieThreads
Excursionist
78 0 7

Yes of course it is www.boogiethreads.com

 

i am not using the Dawn theme right now though. I am working on it before launching

PageFly-Victor
Shopify Partner
5515 962 2311

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

 

please try again with this code

 

Add this css at the bottom

Online Store->Theme->Edit code

assets->theme.scss.css

 

.site-header__upper {

    padding-top: 31px !important;

    position: fixed !important;

    top: 0 !important;

    z-index: 99 !important;

    width: 100% !important;

    background-color: #000 !important;

}

 

.sticky  {

    position: fixed !important;

    top: 15% !important;

    z-index: 99 !important;

    width: 100% !important;

}

 

.sticky--active {

    position: fixed;

    top: 15% !important;

    width: 100%;

    -webkit-transform: none !important;

    transform: none !important;

}

 

Best regards,

PageFly

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

BoogieThreads
Excursionist
78 0 7

I do not have a theme.scss.css but a base.css. I added it there and it does not seem that anything happened. 

PageFly-Victor
Shopify Partner
5515 962 2311

Hi @BoogieThreads 

I can see you have changed the header, if you still want the header to always sitcky try this code and this time in the base.css file

Add this css at the bottom

Online Store->Theme->Edit code

assets->base.css

 

.header-wrapper {
position: fixed !important;
top: 0 !important;
width: 100% important;
}

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.