CSS for sticky header

  • Resolved mantum

    (@mantum)


    4 years ago

    can someone please write me css to make the header and menu sticky? Also if possible make it a little bit transparent when scrolling

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter mantum

    (@mantum)

    solved:

    
.main-header-menu a {
	color: white !important;
}
.main-header-menu a:hover {
	color: #46b2ff !important;
}

 .main-header-bar {
    background: rgba(49,49,49,.9);
}

/*Make Header Sticky*/
.main-header-bar {
    position: fixed;
    top: 0;
    width: 100%;
}

/*Adjust Content Padding*/
.site-content {
    padding-top: 75px;
}

/*Adjust Content Padding for Mobile*/
@media (max-width: 800px) {
    .site-content {
        padding-top: 175px;
    }
}

/*Adjust Content Padding for Mobile*/
@media (max-width: 650px) {
    .site-content {
        padding-top: 200px;
    }
}

    Hi @mantum,

    The Sticky Header feature is not available on the Astra free and you will need custom CSS to make Sticky Header on the Astra free.

    Very pleased to know that you have figured it out. Do let us know if there’s anything else we can help you with.

    Have a nice day and stay safe!

    Kind regards,
    Herman ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS for sticky header’ is closed to new replies.