Элементы не ниже и в центре под навигационной панелью - Адаптивная навигация сверху - PullRequest
Новая
       22

Элементы не ниже и в центре под навигационной панелью - Адаптивная навигация сверху

0 голосов
/ 28 января 2019

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

Я обновил свою навигационную панель, потому что у нее нет заголовка в строке меню, чтобы все получилось хорошо,Теперь то, что произошло, когда я открыл его, он вызывает раскрывающееся меню, но мои пункты находятся не по центру и ниже моей навигации.Почему он действует так, как будто он «плавает» в правой части страницы, где его нельзя увидеть и отрезать (особенно при просмотре в режиме iPhone).Посмотрите на мой скриншот ниже и мои коды и посмотрите, что меня беспокоит.

Когда значок гамбургера не нажимается

enter image description here

При нажатии на значок гамбургера

enter image description here

Вот мои коды.Запустите фрагмент кода или еще лучше, скопируйте и вставьте его в текстовый редактор и запустите его из браузера, чтобы вы могли видеть, о чем я говорю. ПРИМЕЧАНИЕ. Фрагмент кода выполняет то, что я хочу, когда вы запускаете его, но из моего текстового редактора и браузера он не выполняет то, что я хочу. 

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}

.summary {
  min-height: 75vh;
  max-width: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profilePicture {
  padding: 2rem;
}

.profileSummary {
  max-width: 400px;
}

@media screen and (max-width: 800px) {
  .summary {
    flex-direction: column;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="script.js"></script>
</head>

<body>

  <!-- The navigation menu -->

  <div class="topnav" id="myTopnav">
    <a href="home.html" class="active">Home</a>
    <a href="about.html">About Me</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="contact.html">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>



  <div class="summary">
    <div class="profilePicture">
      <img src="https://ih1.redbubble.net/image.464384650.8618/flat,550x550,075,f.jpg" style="width: 170px; height: 170px; border-radius:50%;">
    </div>
    <div class="profileSummary">
      Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently and.
    </div>
  </div>

</body>

</html>

1 Ответ

0 голосов
/ 28 января 2019

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

Первый класс был в медиа-запросе и сам по себе работал: 

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}

И этот класс был ниже него: 

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

Когда ширина экрана была <= 600 пикселей, класс <code>responsive применяется к панели навигации и появляется значок меню гамбургера.Но второй класс responsive ограничивал ширину расширенного меню до 25% от контейнера, что приводило к нежелательному позиционированию.

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

...