CSS to position something directly under header

  • Resolved mantum

    (@mantum)


    3 years, 4 months ago

    I have this banner on my website that is positioned right under the header using this css:

    
.simple-banner {
     top: 90px;
     z-index: 99 !important;
}
@media (max-width: 800px) {
     .simple-banner {
	top: 87px;
	}
}
@media (max-width: 650px) {
     .simple-banner {
	top: 65px;
	}
}

    I used different amount of space from top for different screen sizes however, on some screen sizes it either overlaps or has a gap. Is there any css that would make it be positioned right after the header with no gap or overlapping, no matter the screen or window size the website is being viewed on?

    • This topic was modified 3 years, 4 months ago by mantum.
    • This topic was modified 3 years, 4 months ago by mantum.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Prabhat

    (@prabhatrai)

    3 years, 4 months ago

    Hey @mantum,
    The “Simple Banner” is not changing its position based on the main header, which is creating the additional spacing.

    You can replace your above CSS code with the below one:

    .simple-banner {
    top: 90px;
    z-index: 99 !important;
}
@media (max-width: 921px) {
    .simple-banner {
      top: 87px;
    }
}
@media (max-width: 544px) {
    .simple-banner {
      top: 65px;
    }
}
    Thread Starter mantum

    (@mantum)

    3 years, 4 months ago

    @prabhatrai
    Thank you that worked 🙂

    Prabhat

    (@prabhatrai)

    3 years, 4 months ago

    Happy to help 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS to position something directly under header’ is closed to new replies.