CSS to position something directly under header

  • Resolved mantum

    (@mantum)


    4 years 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 4 years ago by mantum.
    • This topic was modified 4 years 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)

    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)

    @prabhatrai
    Thank you that worked ??

    Prabhat

    (@prabhatrai)

    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.