Отзывчивый навбар не "растянется" - PullRequest
Новая
       7

Отзывчивый навбар не "растянется"

0 голосов
/ 26 августа 2018

У моего веб-сайта есть 3 пункта в навигационном меню, я отключил переключатель адаптивного меню и хочу, чтобы он опускался ниже логотипа в tablet и mobile.Однако я не могу этого сделать.Я просто хочу, чтобы navbar оставил линию и сохранил тот же внешний вид.

Screengrab Полная ширина против мобильного

Я поместил blockна обоих .srt-menu классах в полноэкранном режиме и на 480 экранах, но ничего не работает.Также объявляется ширина для каждого элемента меню или удаление всех отображаемых блоков с использованием float.

. Любая помощь приветствуется.

Вот код HTML: 

<header class="wrapper clearfix">

    <div id="banner">        
        <div id="logo"><a href="index.html"><img src="images/header.png" alt="logo"></a></div> 
    </div>

    <!-- main navigation -->
    <nav id="topnav" role="navigation">
      <ul class="srt-menu" id="menu-main-navigation">          
          <li class="about"><a href="about.html">About</a></li>
          <li class="gallery"><a href="gallery.html">Gallery</a></li>
          <li class="contact"><a href="contact.html">Contact</a></li>   
      </ul>     
    </nav><!-- end main navigation -->

</header>

#menu-main-navigation{
  display:block;
}

.srt-menu, .srt-menu * {
  margin:           0;
  padding:      0;
  list-style:       none;
}

.srt-menu ul {
  position:     absolute;
  display:none;
  width: 12em; /* left offset of submenus need to match (see below) 
  */
}

.srt-menu ul li {
  width: 20%;
}

.srt-menu li:hover {
  visibility:       inherit; /* fixes IE7 'sticky bug' */
}

.srt-menu li {
  float:            left;
  position:     relative;
  margin-left:1px;
  max-width: 100px;
}

.srt-menu li li {
  margin-left:0px;
}

.srt-menu a {
  display:      block;
  position:     relative;
}

#topnav, .srt-menu {
  float:right;
  margin: 1.2em 0 0 0;
}

.srt-menu a {
  text-decoration:none;
  color: #000000;
}

.srt-menu li a {
  background:#fff;
  margin:0; 
  padding:0px 25px;
  height:45px;
  max-width: 100px;
}

.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
  color: #000000;   
}

/*LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.*/
@media only screen and (min-width: 480px) {
  #banner{
    float:left;
    text-align:left;
    margin-bottom:20px;/*this depends on the height of the logo*/
  }

  .topnav {
    float:left; 
    margin: .2em;
  }

  .srt-menu, ul.srt-menu {
    display: block !important;
  }
}

1 Ответ

0 голосов
/ 26 августа 2018

Исправлена!Я думаю, мне нужно было выписать проблему.

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

По сути, измените блок на inline-block, измените некоторые отступы и поля. 

.srt-menu li.about, .srt-menu li.gallery, .srt-menu li.contact {
display:inline-block;
margin:1px 0; 
padding:10px;
text-decoration:none;
font-size: 1.4em;

}
...