响应式导航

Question

响应式导航

htmlcssnavstickyhamburger-menu

3

我正在建立我的第一个响应式网站。

对于平板电脑、笔记本电脑和台式机使用，导航栏是“粘性的”，并且按照我的要求正常工作。

对于任何小于此大小的显示器，导航栏都隐藏在典型的“汉堡菜单”中，点击后展开导航栏。

这一切都很好，但是我的问题在于“汉堡菜单”点击后导航栏的显示。导航栏显示在标题上方和下方的内容之上，而不是将任何内容推到屏幕的一侧/向下移动，我觉得默认情况下应该是这样的。

我感觉问题与定位有关，但我无法确定具体原因。以下是导航元素在常规和响应状态下的位置：

/* 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;
    }

这也是我第一次尝试使用JSFiddle。

如果有人需要我提供其他信息，请询问。

谢谢任何帮助。

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

- Alex E

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathon · Accepted Answer

有一些问题阻止了您的导航菜单向下推动下面的内容：

jQuery硬编码了“.nav-placeholder” div的高度。高度应该是“auto”，这样浏览器可以计算出高度并将内容向下推。

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

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

在@media only screen and (max-width: 480px)中，将标题标签的高度更改为auto。

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

我提供了一个示例https://jsfiddle.net/jonathon_wei/865nsj9q/1/