Пытаюсь исправить панель навигации для мобильных устройств

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

http://i255.photobucket.com/albums/hh140/testament1234/responsive_zps3a22ab61.jpg

Вот так это выглядит в полноэкранном режиме.

http://s255.photobucket.com/user/testament1234/media/desktop_zps4c60a09c.jpg.html

Как установить логотип поверх навигации при просмотре на мобильном устройстве.

Это мой код для разметки или HTML.

<div class="container">
 <div id="nav-container">
     <div class="six columns navigation">
     <ul>
         <li><a href="#" title="Home">Home</a></li>
         <li><a href="#" title="Home">Project</a></li>
         <li><a href="#" title="Home">Blog</a></li>

     </ul>
     </div>
     <div class="four columns">
         <h1>Logo</h1>
     </div>
     <div class="six columns navigation">
         <ul>
             <li><a href="#" title="Gallery">Gallery</a></li>
             <li><a href="#" title="Gallery">About</a></li>
             <li><a href="#" title="Gallery">Contact</a></li>
         </ul>
     </div>
 </div>
</div>

И это мой код для моего CSS

#nav-container{margin-top:20px;}
.navigation{text-align:center; background-color:#D1673A;}
.navigation li{display:inline; }
.navigation a{text-decoration:none; color:black; display:inline-block; padding:20px 20px 20px}
.navigation a:hover{color:white; background-color:black}

Мое использование каркаса для создания адаптивного веб-сайта. Что касается моего вопроса, могу ли я установить стиль в медиа-запросах или изменить свою разметку?


html responsive-design markup media-queries
person clestcruz    schedule 07.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

ИЗМЕНИТЬ

Посмотрите, подойдет ли вам этот обновленный ответ: http://jsfiddle.net/panchroma/HBhNt/

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

CSS в дополнение к тому, что вы опубликовали, это:

.navigation{
position:relative;
}

.logo{
height:60px;
}

@media only screen and (max-width: 767px) {
.logo{
 position:absolute;
    top:0;
    left:0;


}
.navigation{
   top:60px;
}  

.navigation ul li a{
    width:100%;
}
}

==============================

Оригинальный ответ ниже

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

См. ниже пример того, как вы могли бы сделать это в HTML и CSS.

Вам, вероятно, придется поиграть с настройками @media, чтобы получить желаемые результаты, например, вам может понадобиться скрыть логотип в середине навигации для смартфонов или даже планшетов с горизонтальной ориентацией.

Удачи!

HTML

 <div class="container">
 <div id="nav-container">
 <div class="four columns display-mobile">
     <h1>Logo</h1>
 </div>
 <div class="six columns navigation">
 <ul>
     <li><a href="#" title="Home">Home</a></li>
     <li><a href="#" title="Home">Project</a></li>
     <li><a href="#" title="Home">Blog</a></li>

 </ul>
 </div>
 <div class="four columns hide-mobile">
     <h1>Logo</h1>
 </div>
 <div class="six columns navigation">
     <ul>
         <li><a href="#" title="Gallery">Gallery</a></li>
         <li><a href="#" title="Gallery">About</a></li>
         <li><a href="#" title="Gallery">Contact</a></li>
     </ul>
 </div>
 </div>
</div>

CSS

/* set defaults for display-mobile and hide-mobile */  

.display-mobile{
display:none;
}  

.hide-mobile{  
display:inherit;
}  

/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */  
/* depending on the specifics of your site CSS, you may need to use !important with the following */  

@media only screen and (max-width: 479px) {
.display-mobile{
display: inherit; 
}
.hide-mobile{
display:none;
}
}
person David Taiaroa    schedule 07.07.2013
comment
Не будет ли моя разметка неправильной. Я считаю, что h1 следует использовать только один раз. В основном я использую фоновое изображение для логотипа или h1. - person clestcruz; 08.07.2013
comment
@clestcruz В этом случае я не думаю, что наличие более одного H1 будет проблемой, потому что Google разберется с этим - вы показываете только один в любой момент времени. Однако, пожалуйста, посмотрите мой обновленный ответ, который чище. - person David Taiaroa; 09.07.2013
comment
Спасибо за публикацию решения, будем пробовать. Я также пытаюсь придумать решение со своей стороны - person clestcruz; 09.07.2013
comment
Ваше решение сработало, и теперь мы тестируем его в разных браузерах. Мне действительно не нравится использовать атрибут позиционирования, так как это очень технический атрибут, и я могу использовать его неправильно. - person clestcruz; 10.07.2013