How to bring all elements down with a header slide up/down?

Tags: javascript,jquery,html,css

Problem :

I'm using CSS to bring down a header element when the user hovers over it. Is it possible to also bring down the rest of the page so that the header overlaps absolutely nothing? How would this be done?

Example of header here:


Solution :

You just need to use the height of the nav div, like this:

nav {
  width: 100%;
  height: 50px;
  background: #000;
  color: #fff;

.active {
  height: 200px;

I made you a very simple fiddle:

I used jQuery to toggle the .active class, on the nav when the button is pressed. The .active class overrides the "height:50px" rule , which is the initial state of the nav class.

It's just a very simple example that. It can be done with Javascript too but the event handling is a little more complex. Hope it helps.

    CSS Howto..

    How to add custom layout and css in a CakePHP application?

    how do you add footer? like all right's reserved for a CSS design?

    How to repeat a code in html without writing the same code again and again

    How to delete css right or bottom on drag

    How can I insert text before an item with CSS?

    How to adjust height of the div base on contents? [duplicate]

    How to show hide divs INSIDE divs easily?

    How to enlarge an image horizontally in css?

    How to fix element on the center of scrollable page?

    How to set the style of the message in an SWT Text field?

    How to mix colors in CSS?

    How can I set a “bounding” area for my drag-able object in javascript?

    How do you add 'box-sizing: border-box' to Normalize.css file?

    How to Set Two Transition Durations for Multiple CSS Transforms

    How to layer elements with CSS position property?

    How to make an interactive sidebar with jQuery and CSS3?

    With three divs, how to make one float to the right?

    How to control the postioning of a fieldset with css?

    How CSS property “opacity” renders in browsers (IE, Chrome, Firefox, Opera)?

    How to divide in 4 equal parts a li menu

    How to understand CSS Background-Position coordinates

    How to stop divs moving under each other when zooming out

    How to position contents according to zoom level?

    CSS select: how to count and select child of a specific class only?

    How to get the max width of my css element using javascript

    how to make background-image included via a “class” responsive

    How to target separated class names through css?

    How do I keep dropdown menus the same width of top level categories with auto width

    How can I change cssText in IE?

    How to make a div a link as it transitions in CSS