我目前正在为一家公司建立一个响应式网站,我在平板电脑和手机上遇到了一个巨大的问题。
问题在于,在平板电脑和移动设备中,固定导航栏会隐藏我的内容/跳过它们,而我希望它在切换时按下“内容”。 < / p>
我的.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>
答案 0 :(得分:0)
我通过添加填充来修复我的横幅被移动分辨率中的标题/导航隐藏的问题:top:200px;在身体标签上。
但我的导航设备的主要问题仍未解决问题仍然存在
答案 1 :(得分:0)
因为您的标题位于页面顶部且位置固定且位置不对你的导航是在这个标题内,没有办法切换导航将推送页面的内容。
这是因为当前标题已被&#34;采取&#34;在文档流程之外,它不会影响它之后的任何元素。导航将元素向下移动到页面的唯一方法是删除固定的位置。
- 编辑
在移动断点上更改固定到位置相对或继承的位置。
e.g。
.headerplace {
position: relative;
top:0px;
width:100%;
padding: 15px;
min-height: 100px;
}
https://jsfiddle.net/wy38hy37/15/ - 现在按下页面上的其他元素。