Header Removal

Making this post for people who might have trouble and look for a solution here. I’m pretty new to css but the arcane header is something I really wanted removed on my checkout and on my landing pages. This code does the trick of me, but depending on the height of your logo you may have to change the last one. I use elementor which offers additional css section in page settings section. If you put this in your broader additional css it will remove the header site wide. Please note, the header is still there just invisible and squished.

.navbar {
visibility: collapse;
}

.col-4 {
visibility: collapse;
}

.navbar-wrapper {
visibility: collapse;
}

.after-nav {
visibility: collapse;
}

header {
visibility: collapse;
margin: -100px;
}