Панель поиска не отвечает должным образом на медиа-запрос - PullRequest
Новая
       46

Панель поиска не отвечает должным образом на медиа-запрос

0 голосов
/ 25 марта 2020

У меня есть панель навигации с четырьмя ссылками, отображаемыми рядом друг с другом, и кнопка корзины, которая всплывает вправо.

Я добавил панель поиска, которая испортила отображение кнопки корзины, но я, казалось, исправил это проблема отображения с отрицательным полем.

Однако, теперь, когда экран становится ниже 705 пикселей (когда у панели поиска возникнет проблема с изменением размера), и он переключается на панель навигации мобильного стиля, панель поиска отображается на том же линия со ссылкой на корзину. Я не могу заставить его перейти к своей собственной линии.

HTML & JavaScript: 

<script>
      /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
          x.className = "topnav";
        }
      }
    </script>
  </head>
  <!--Nav Bar-->
  <nav class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#merchants">Merchants</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="Search.." name="search" />
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>
    <a class="right" href="#cart">Cart <i class="fas fa-shopping-cart"></i></a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </nav>

CSS: 

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* Move the class "right" to the right side of the page */
.topnav a.right {
  float: right;
  border-left: 1px solid #6b6b6b;
}
/* Change the color of links on hover */
.topnav a:hover {
  background-color: #eeff00;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #00a2ff;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* search bar styling */
.topnav .search-container {
  margin-right: -10px;
  float: right;
}

.topnav input[type="text"] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

/* When the screen is less than 705 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 705px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav div {
    display: none;
    margin-top: 10px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 705px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive div {
    clear: both;
    display: block;
    text-align: left;
  }
}

Ответы [ 2 ]

0 голосов
/ 28 марта 2020

Добавьте эти четыре селектора в ваш CSS -файл, и кнопка поиска будет отображаться под 705px в отдельной строке: 

  .topnav.responsive .search-container {
    float: none;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
   .topnav.responsive input[type=text] {
    float: none;
    display:inline-block
    text-align: left;
    width: 80%;
    margin: 0px;
    padding: 14px;
  }
   .topnav.responsive .search-container button{
    float: none;
    display:inline-block
  }

решение, если экран меньше 705px

Я надеюсь, что это решение, которое вы искали

0 голосов
/ 26 марта 2020

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

...