Responsive navigation

Question

I'm currently building my very first responsive website.

For tablet, laptop and desktop use, the navigation is 'sticky' and works just as i'd like it to.

For any display smaller than that, the navigation is hidden inside a typical 'burger menu' which unveils the nav upon click.

This all works fine, however my issue is with the display of the nav upon 'burger-click'. The nav is displayed above the header and the content below, rather than pushing any content aside/down the screen and I feel it would by default.

I feel the issue is to do with positioning, I just can't put my finger on what. Here is the position of my nav elements when displayed in it's regular and responsive states:

/* HEADER & NAV
--------------------------*/
header {
    height: 140px;
    position: relative;
    background-image: url("../img/headerback.jpg");
    text-align: center;
    padding-top: 1.4em;
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
}

header a {
    font-size: 4.8em; 
    border-bottom: solid 5px #b9beaa;
}

header a, nav li, footer, footer a {
    text-decoration: none;
    color: #fff; 
}

nav {
    height: 36px;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0.245em;
    padding-top: 2.5em;
}

nav li {
    display: inline;
    padding: 0 0.6em 0 0.7em;
}

nav li a {
    border: none;
    letter-spacing: 2px;
    position: relative;
}

/*----------------- Responsive Nav */
    nav ul {
        display:none;
    }
    nav a#navIcon{
        position: absolute;
        right: 20px;
        top: 20px;
        border-bottom: none;
    }
    nav {
        font-size: 0.6em;
    }
    nav li {
        display: block;
        padding-bottom: 0.6em;
    }
header a {
        font-size: 1.6em;
    }

This is also my first attempt at using JSFiddle.

If anyone needs me to supply anything else please ask.

Thanks for any help.

https://jsfiddle.net/AlexEd/5a98ttq8/

Jonathon · Accepted Answer · 2016-01-03T23:22:24.613

1

There are a few issue preventing your navigation menu push down the content below:

jquery that hard set the height of ".nav-placeholder" div. the height should be "auto" so the browser can calculate the height and push the content below.

jQuery(".nav-placeholder").height("auto");

nav tag is position: absolute. change it to static. and height: auto.

nav {
    font-size: 0.6em;
    position: static;
    height: auto;
}

header tag change height to auto in @media only screen and (max-width : 480px)

header {
    height: auto;
    padding-top: 0.8em;
    padding-bottom: 0.2em;
}

I put together an example https://jsfiddle.net/jonathon_wei/865nsj9q/1/

edited Jan 03 '16 at 23:22

answered Jan 03 '16 at 22:38

Jonathon

552
1
9
14

Thank you for your clear answer, it works brilliantly. Unfortunately it has created a new issue regarding the sticky nav - when scrolling down to the point where the nav is meant to stick, the nav stretches the entire height of the window. I know this is to do with the height auto of the nav (I think) - would a max-height help? This is a little out of my comfort zone :) – Alex E Jan 04 '16 at 12:22
Edit: Fixed by changing height of nav to 3% – Alex E Jan 04 '16 at 12:34
@AlexE, thank you for giving me the feedback. Can I ask what device you are testing on? I could only try on chrome on desktop machine at the time providing the answer and I did not see that issue. – Jonathon Jan 04 '16 at 21:41

Responsive navigation

1 Answers1