navbar, проблема с отзывчивой навигацией - PullRequest
Новая
       16

navbar, проблема с отзывчивой навигацией

1 голос
/ 12 апреля 2019

Когда моя панель навигации отображается на небольшом экране (пример с мобильным устройством), она не отображается должным образом, я не могу решить проблему

Я несколько раз пытался изменить css, но получалосьхуже

Можете ли вы помочь мне, пожалуйста:)

отзывчивый тест navbar 

@media( max-width: 1200px){
    header{
        /*margin: 20px;*/
        
    }
}
@media( max-width: 768px){
    .menu-toggle{
        display: block;
        width: 40px;
        height: 40px;
        margin: 10px;      
        float: right;
        cursor: pointer;
        text-align: center;
        font-size: 30px;
        color: #069370;
    }
    .menu-toggle:before{
        content: '\f0c9';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    .menu-toggle.active:before{
        content: '\f00d';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    nav {
        display: none;
    }
    nav.active {
        display: block;
        width: 100%;
    }
    nav.active ul {
        display: block;
        
    }
    nav.active ul li a {
        margin: 0;
        
    }
}

Ответы [ 4 ]

0 голосов
/ 12 апреля 2019

у меня есть добавление переполнения: auto в моем заголовке, это работает, но я не могу исправить панель меню, когда я нажимаю на переключатель меню кнопки, текст идет вправо, и я не вижу его. я думаю, что у меня есть проблема с моим "float: right" в классе .menu-toggle; текст не отображается на мобильном дисплее, он идет вправо и не занимает хорошее место ... я хочу разместить панель меню одну под другой

  • дом
  • о
  • услуги

navbar реагирует на переполнение: авто 

@media( max-width: 1200px){
    header{
        /*margin: 20px;*/
      overflow: auto;
        
    }
}
@media( max-width: 768px){
    .menu-toggle{
        display: block;
        width: 40px;
        height: 40px;
        margin: 10px;     
        float: right;
        cursor: pointer;
        text-align: center;
        font-size: 30px;
        color: #069370;
    }
    .menu-toggle:before{
        content: '\f0c9';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    .menu-toggle.active:before{
        content: '\f00d';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    nav {
        display: none;
    }
    nav.active {
        display: block;
        width: 100%;
    }
    nav.active ul {
        display: block;
        
    }
    nav.active ul li a {
        margin: 0;
        
    }
}
0 голосов
/ 12 апреля 2019

Привет. Можете ли вы следовать ниже структуры HTML: 

<header>
    <a href="#" class="logo">Logo</a>
    <div class="menu-toggle"></div>
      <nav>
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      <div class="clearfix"></div>   

  </header>
0 голосов
/ 12 апреля 2019

Элементы в вашем <header> элементе плавающие, и поэтому меню не знает, где останавливается элемент, и это заставляет CSS не знать, как вычислить высоту этого элемента

Быстрыйисправить это можно было бы поставить overflow: hidden: 

<header style="overflow: auto"> ... </header>

Вы можете многое узнать об этом из этого сложного ответа StackOverflow ссылка на ответ

0 голосов
/ 12 апреля 2019

Вам просто нужно установить большую ширину для вашего контейнера.

Чтобы решить вашу проблему: 

@media( max-width: 768px){
    .menu-toggle{
        width: 400px;
    }
}
...