How to Display Menu Out Of Header When In Responsive View?

[wolfgang1983]

Hi.

Just a bit stuck would like to know best way to display the menu toggle out above my bottom header when in responsive view at top

So the menu only show in bottom header when not in responsive view.

http://codepen.io/kiwi83/pen/BKFcG

[Paulie_D]

What is a ‘bottom header’?

What does ‘responsive view’ mean? Smaller screen width?

At the moment, it looks like it’s working fine.

[wolfgang1983]

@Paulie_D

The bottom-header is this part because I have another header. But just for this codepen have broken it down like you said to do.

Also the responsive view yes means Smaller screen width: My media screen is at bottom of css.

When resize the screen on codepen full view and resize it you will see menu still stays in header I am trying to get the menu to display above the header in @media screen max 979px;

Just trying to teach my self to make own responsive menus

http://codepen.io/kiwi83/pen/BKFcG

[Paulie_D]

You are talking about changing the HTML (taking the nav out of the header) which you cannot do with CSS.

It would be possible to move the nav/menu using positioning though.

[wolfgang1983]

Ok Thanks @Paulie_D will just have a play around with css and html and stuff and will see what I come up with.

[Paulie_D]

Not saying that you can’t get it to look like you’ve moved it but it would depend on how it is supposed to look. Do you have an image of your proposed design at smaller widths?

Alternatively, use JS/JQ to remove the nav from it’s current position in the DOM and re-append it where you want it based on screen width.

[Author]

Posts