CSS responsive absolute positioning

Question

I have a dropdown menu whose position should be depending on the height of the header. The height of the header varies by content, the font-size and the padding set by media queries in dependence of viewport height.

HTML:

<header>
  <p>Example</p>
  <nav>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
  </nav>
</header>

CSS:

body {
  background-color: white;
}

header {
    background-color: grey;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
}

@media(max-height: 500px) {
  header {
    padding: 0;
  }
}

nav {
  background-color: #CCC;
  position: absolute;
  top: 82px;
  width: 100%;
}

a {
  border-bottom: 1px solid white;
  display: block;
  padding: 0.75rem;
}

Imagine nav is the folded out dropdown menu.

Fiddle: https://jsfiddle.net/mjufc63b/2/

If you decrease your window's height below 500 pixels it appears a white gap between header and nav, which should not be so. Also if you change your browser's font size.

Is there a solution to get the dropdown menu always below the header independent of the header's height and also above the other content (what absolute positioning does) without using javascript and wihout moving the nav outside header?

The nav should automatically move to top and close the gap without the need to redefine the margin with the top css property in media query. In this example I could do it, yes, but I can't define the top margin if the headers height changes because of the font-size or height of content. — Hativ
– Hativ, Commented Feb 16, 2017 at 16:34
Yes, sorry I misunderstood your question. You can check my answer. — Armin
– Armin, Commented Feb 16, 2017 at 16:35

vals · Accepted Answer · 2017-02-16 16:47:07Z

5

Set the top to 100%, outside of the media query

body {
  background-color: white;
}

header {
    background-color: grey;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
}

@media(max-height: 500px) {
  header {
    padding: 0;
  }
}

nav {
  background-color: #CCC;
  position: absolute;
  top: 100%;
  width: 100%;
}

a {
  border-bottom: 1px solid white;
  display: block;
  padding: 0.75rem;
}

<header>
  <p>Example</p>
  <nav>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
  </nav>
</header>

answered Feb 16, 2017 at 16:47

vals

64k11 gold badges96 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Armin Over a year ago

Nice. I got too caught up in media query solution, that I forgot the most general one :)

Hativ Over a year ago

Easy and clean solution.. shame on me. Thank you!

vals Over a year ago

@Armin Thanks to both . Happy that it helped !

Armin · Accepted Answer · 2017-02-16 16:48:13Z

3

Inside your media query for under 500px height, remove fixed top margin from nav element.

@media(max-height: 500px) {
  header {
    padding: 0;
  }
  header > nav {
    top: auto;
  }
}

Actually you can also do it by default, outside of your media query. Define top margin as auto. This way you won't have to care about fixed value

nav {
  background-color: #CCC;
  position: absolute;
  top: auto
  width: 100%;
}

Since your header is fixed it won't push other elements, so in order to do so you need to add space to inner elements. For example:

header {
    background-color: grey;
    position: fixed;
    width: 100%;
}

header p{
    padding: 1rem 0;
}

If you remove padding from header and add it to your inner p element, it will push your nav. But in general for more content you can create a new wrapper element inside that will work as "space-taker".

edited Feb 16, 2017 at 16:48

answered Feb 16, 2017 at 16:34

Armin

1,1781 gold badge7 silver badges16 bronze badges

2 Comments

Hativ Over a year ago

The solution for the media query works, but I need an universal solution if header's height is changed by font-size or content. Your second solution will omit the padding bottom.. see jsfiddle.net/mjufc63b/3

Armin Over a year ago

I updated my answer. Also, check @vals answer for alternative.

Collectives™ on Stack Overflow

CSS responsive absolute positioning

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related