Material

Code für überlappende Spalten

/*Code für überlappenden Text*/
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	margin-right: -150px;
}

.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
	margin-left: -150px;
}

/*Code für überlappenden Text auf mobilen Geräten*/
@media (max-width: 640px) {
  
    .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
        margin-left: 0px !important;
    }
    
    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
        margin-right: 0px !important;
    }
    
}

Quelle: https://www.pootlepress.com/2021/10/how-to-create-overlapping-columns-with-the-wordpress-gutenberg-block-editor/#css-code

Code für Fixed Header in Astra Free

/*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;
	}
}

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

Code für Styleguide