修复了平板电脑和手机问题的导航栏
Fixed navigation bar for tablet and mobile issue
我目前正在为一家公司构建一个响应式网站，我遇到了一个大问题，即我在平板电脑和手机上的固定导航栏。
问题是，虽然在平板电脑和移动设备中，固定导航栏将我的 content/jumps 隐藏在它们上方，但我希望它向下推 "contents" 而打开。
另外，我的 .headerplace class 在移动设备上隐藏了 .bannerplace。如果你能帮我解决这个问题，我将不胜感激。
Link 到 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>
我通过添加 padding:top:200px 解决了移动分辨率中我的 header/nav 隐藏我的横幅的问题；在 body 标签上。
但我的导航的主要问题仍然存在，它没有将内容下推
因为您的页眉固定在页面顶部且位置固定并且您的导航在此页眉内，所以切换导航不会将页面内容向下推。
这是因为当前页眉已经"taken"脱离文档流，不影响后面的任何元素。让导航将元素向下移动页面的唯一方法是删除固定位置。
-- 编辑
在移动断点上将固定位置更改为相对位置或继承。
例如
.headerplace {
position: relative;
top:0px;
width:100%;
padding: 15px;
min-height: 100px;
}
https://jsfiddle.net/wy38hy37/15/ - 现在将页面上的其他元素向下推。
我目前正在为一家公司构建一个响应式网站，我遇到了一个大问题，即我在平板电脑和手机上的固定导航栏。
问题是，虽然在平板电脑和移动设备中，固定导航栏将我的 content/jumps 隐藏在它们上方，但我希望它向下推 "contents" 而打开。
另外，我的 .headerplace class 在移动设备上隐藏了 .bannerplace。如果你能帮我解决这个问题，我将不胜感激。
Link 到 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>
我通过添加 padding:top:200px 解决了移动分辨率中我的 header/nav 隐藏我的横幅的问题；在 body 标签上。
但我的导航的主要问题仍然存在，它没有将内容下推
因为您的页眉固定在页面顶部且位置固定并且您的导航在此页眉内，所以切换导航不会将页面内容向下推。
这是因为当前页眉已经"taken"脱离文档流，不影响后面的任何元素。让导航将元素向下移动页面的唯一方法是删除固定位置。
-- 编辑
在移动断点上将固定位置更改为相对位置或继承。
例如
.headerplace {
position: relative;
top:0px;
width:100%;
padding: 15px;
min-height: 100px;
}
https://jsfiddle.net/wy38hy37/15/ - 现在将页面上的其他元素向下推。