Home Admin

Embed Snippet on Your Site

<script src="https://library.wpcode.com/embedjs/joe1ky12.js/"></script>

Add Sticky Header – Astra Free

This code has been updated to include adjustments for the off-canvas menu to also be sticky and has been tested on Astra 4.1.2

Credit: https://cgscomputer.com/how-to-create-a-sticky-header-with-the-free-astra-wordpress-theme/

Tanveer Malik

<10

Code Preview

Comments

css


	`/Make Header Sticky/`
	`.site-header {`
	`position: fixed;`
	`top: 0;`
	`width: 100%;`
	`}`

	`/Adjust Content Padding/`
	`.site-content {`
	`padding-top: 170px;`
	`}`

	`/Adjust Content Padding for Mobile/`
	`@media (max-width: 800px) {`
	`.site-content {`
	`padding-top: 100px;`
	`}`
	`/Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout/`
	`.main-navigation {`
	`position: fixed;`
	`margin-top: 0px;`
	`}`
	`}`

	`/Adjust Content Padding for Mobile/`
	`@media (max-width: 650px) {`
	`.site-content {`
	`padding-top: 150px;`
	`}`
	`/Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout/`
	`.main-navigation {`
	`position: fixed;`
	`margin-top: 60px;`
	`}`
	`}`

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

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

/*Adjust Content Padding for Mobile*/
@media (max-width: 800px) {
    .site-content {
        padding-top: 100px;
    }
	/*Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout*/
		.main-navigation {
				position: fixed;
				margin-top: 0px;
	}
}

/*Adjust Content Padding for Mobile*/
@media (max-width: 650px) {
    .site-content {
        padding-top: 150px;
    }
	/*Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout*/
		.main-navigation {
				position: fixed;
				margin-top: 60px;
	}
}

Embed Snippet on Your Site

Add Sticky Header – Astra Free

Comments

Add a Comment Cancel Reply