我目前正在为一家公司构建一个响应式网站，我遇到了一个大问题，即我在平板电脑和手机上的固定导航栏。
问题是，虽然在平板电脑和移动设备中，固定导航栏会隐藏我的内容/跳过它们，但我希望它在打开时将“内容”向下推。
此外，我的 .headerplace 类在移动设备上隐藏了 .bannerplace。如果你能帮助我解决这个问题，我将不胜感激。
链接到 https://jsfiddle.net/wy38hy37/13/
<!Doctype html>
<title>NK Electrical LTD</title>
<body>
<div class="container">
<header class="headerplace">
<div class="logo">
<img src="http://s15.postimg.org/q1sf0zvsb/nklogo.png" alt="NK Electrical LTD Logo">
</div>
<nav class="navigation">
<li><a href="#home.html">Home</a></li>
<li><a href="#electrical.html">Electrical Installations</a></li>
<li><a href="#lighting.html">Lighting</a></li>
<li><a href="#appliances.html">Home appliances</a></li>
<li><a href="#about.html">About us</a></li>
<li><a href="#contact.html">Contact us</a></li>
</nav>
<a id="i-nav" href="#"></a>
</header>
<div class="bannerplace">
</div>
<div class="content-row group">
<div class="primary-content col">
<img class="headlineimg" src="http://s10.postimg.org/yvwknf09l/logoone.png"alt="Electrical logo"><h2>Electrical Installations</h2>
<hr>
<p>A house, a factory and generally every building has a life span of 40-50 years. The electrical installation for such a building will be designed and implemented only once, and should work reliably within time. The importance of the electrical installation process is of equal importance so as to be able to support the necessities of this amount of time within the years to come and not just of today. Therefore, due to this specific element, the electrical installation requires: experience, technical knowhow, excellent organizational structure and for sure an after sale service.</p>
<p>In ΝΚ Electrical Ltd we have placed in action our past experiences, continuously trying to line up with technology reaching a high expectation limit in organizational behavior, but most of all we value the after sale service that mantles a serious part of the puzzle called electrical installations.</p>
<button class="btn-action" type="submit">Book a table</button>
</div>
<div class="primary-content col">
<img class="headlineimg" src="http://s29.postimg.org/4jne5no53/emergency.png"alt="Electrical logo"><h2>24/7 Emergency Service</h2>
<hr>
<p>A house, a factory and generally every building has a life span of 40-50 years. The electrical installation for such a building will be designed and implemented only once, and should work reliably within time. The importance of the electrical installation process is of equal importance so as to be able to support the necessities of this amount of time within the years to come and not just of today. Therefore, due to this specific element, the electrical installation requires: experience, technical knowhow, excellent organizational structure and for sure an after sale service.</p>
<p>In ΝΚ Electrical Ltd we have placed in action our past experiences, continuously trying to line up with technology reaching a high expectation limit in organizational behavior, but most of all we value the after sale service that mantles a serious part of the puzzle called electrical installations.</p>
<button class="btn-action" type="submit">Book a table</button>
</div>
<div class="secondary-content col">
<img class="headlineimg" src="http://s29.postimg.org/hp2wbri0n/lighting.png"alt="Electrical logo"><h2>Lighting</h2>
<hr>
<p>A house, a factory and generally every building has a life span of 40-50 years. The electrical installation for such a building will be designed and implemented only once, and should work reliably within time. The importance of the electrical installation process is of equal importance so as to be able to support the necessities of this amount of time within the years to come and not just of today. Therefore, due to this specific element, the electrical installation requires: experience, technical knowhow, excellent organizational structure and for sure an after sale service.</p>
<p>In ΝΚ Electrical Ltd we have placed in action our past experiences, continuously trying to line up with technology reaching a high expectation limit in organizational behavior, but most of all we value the after sale service that mantles a serious part of the puzzle called electrical installations.</p>
<button class="btn-action" type="submit">Book a table</button>
</div>
<div class="third-content col">
<img class="headlineimg" src="http://s15.postimg.org/8alw76z6z/homeappliances1.png"alt="Home Appliances 1"><h2>Home Appliances</h2>
<hr>
<p>A house, a factory and generally every building has a life span of 40-50 years. The electrical installation for such a building will be designed and implemented only once, and should work reliably within time. The importance of the electrical installation process is of equal importance so as to be able to support the necessities of this amount of time within the years to come and not just of today. Therefore, due to this specific element, the electrical installation requires: experience, technical knowhow, excellent organizational structure and for sure an after sale service.</p>
<p>In ΝΚ Electrical Ltd we have placed in action our past experiences, continuously trying to line up with technology reaching a high expectation limit in organizational behavior, but most of all we value the after sale service that mantles a serious part of the puzzle called electrical installations.</p>
<button class="btn-action" type="submit">Book a table</button>
</div>
<div class="third-content col">
<img class="headlineimg" src="http://s2.postimg.org/khlogvand/homeappliances2.png"alt="Home Appliances 2"><h2>Home Appliances</h2>
<hr>
<p>A house, a factory and generally every building has a life span of 40-50 years. The electrical installation for such a building will be designed and implemented only once, and should work reliably within time. The importance of the electrical installation process is of equal importance so as to be able to support the necessities of this amount of time within the years to come and not just of today. Therefore, due to this specific element, the electrical installation requires: experience, technical knowhow, excellent organizational structure and for sure an after sale service.</p>
<p>In ΝΚ Electrical Ltd we have placed in action our past experiences, continuously trying to line up with technology reaching a high expectation limit in organizational behavior, but most of all we value the after sale service that mantles a serious part of the puzzle called electrical installations.</p>
<button class="btn-action" type="submit">Book a table</button>
</div>
</div>
<footer class="footerplace">
<p>©2016. NK Electrical LTD</p>
</footer>
</div>
</body>
最佳答案
因为您的页眉固定在页面顶部且位置固定并且您的导航在此页眉内，所以切换导航不会将页面内容向下推。
这是因为当前页眉已经从文档流中“取出”，它不会影响后面的任何元素。让导航将元素向下移动页面的唯一方法是删除固定位置。
-- 编辑
在移动断点上将固定位置更改为相对位置或继承。
例如
.headerplace {
position: relative;
top:0px;
width:100%;
padding: 15px;
min-height: 100px;
}
https://jsfiddle.net/wy38hy37/15/ - 现在将页面上的其他元素向下推。
关于jquery - 修复了平板电脑和手机问题的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35337138/