Исправлена панель навигации для планшета и мобильного телефона

В настоящее время я создаю отзывчивый веб-сайт для компании, и я столкнулся с огромной проблемой с моей фиксированной навигационной панелью на планшетах и мобильных телефонах.Исправлена панель навигации для планшета и мобильного телефона

Проблема заключается в том, что, хотя в планшете и мобильном телефоне фиксированная панель навигации скрывает мой контент/перескакивает через них, вместо этого я хочу, чтобы он нажал «содержимое» вниз, когда он включен.

Также мой класс .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>&copy;2016. NK Electrical LTD</p> 
     </footer> 
    </div> 

</body>

источник

2016-02-11 Aris Constantinou

Поскольку вы заголовок застрял в верхней части страницы с позиции фиксированной & ваш нав находится внутри этого заголовка , нет никакого способа переключить навигатор, который будет перемещать содержимое страницы вниз.

Это связано с тем, что текущий заголовок был «взят» из потока документов, он не влияет на какие-либо элементы после него. Единственный способ перемещения навигации по элементам вниз - удалить фиксированную позицию.

- редактировать

На мобильной точке останова изменить положение, прикрепленное к позиции по отношению или наследовать.

например.

.headerplace { 
    position: relative; 
    top:0px; 
    width:100%; 
    padding: 15px; 
    min-height: 100px; 
}

https://jsfiddle.net/wy38hy37/15/ - теперь подталкивает другие элементы на странице вниз.

источник

2016-02-11 12:07:58

Да, до того, как я добавил исправленную позицию, все было правильно, когда я переключил свой значок на панели навигации, все было сдвинуто вниз, но я хочу также, чтобы мой навигационный бар перемещался, пока пользователь прокручивает –

Да с фиксированной позицией это невозможно. достичь. –

Любое предложение о том, как я могу выполнить свою цель без фиксированной позиции? –

Я установил вопрос, где мой баннер был спрятан мой заголовок/нав в мобильном разрешении, добавляя отступы: верх: 200px; на теге тела.

Но все же моя главная проблема с моей нав, что не выталкивает содержимое вниз по-прежнему существует

источник

2016-02-11 11:51:29

Исправлена ​​панель навигации для планшета и мобильного телефона

ответ

Смежные вопросы

Исправлена панель навигации для планшета и мобильного телефона