Почему мое фиксированное меню находится под значком моего гамбургера? - PullRequest
Новая
       9

Почему мое фиксированное меню находится под значком моего гамбургера?

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

Можно ли найти значок гамбургера в фиксированной строке меню?

Я пытался поместить элемент внутри class = "sidenav" в теге body, но я не смог найти значок. 

span {
  font-size: 30px;
  cursor: pointer;
  position: absolute;
}


/* Style the navigation bar */

.navbar {
  width: 100%;
  margin-left: 0px;
  background-color: #555;
  overflow: auto;
}


/* Navbar links */

.navbar a {
  float: left;
  text-align: center;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}
<body>
  <div id="main">
    <span onclick="openNav()">&#9776;</span>
    <div class="navbar">
      <a href="#">Home</a>
      <a href="#">Search</a>
      <a href="#">Contact</a>
      <a href="#">Login</a>
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fas fa-search"></i></button>
    </div>
  </div>
</body>

Ожидание

Expectation

Реальность

Reality

Ответы [ 3 ]

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

Вы можете исправить вашу проблему с помощью 2 строк на CSS: 

#main {
  display: flex;
  justify-content: space-between;
}

enter image description here

http://jsfiddle.net/r24uyeq5/

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

Вы можете установить 'margin-left' значение, равное ширине иконки, в navBar 

.navbar {
  width: 100%;
  margin-left: 100px;//Icon width
  background-color: #555;
  overflow: auto;
}
0 голосов
/ 29 января 2019

Попробуйте, я заметил несколько вещей, которые можно улучшить в вашем коде, например, вы можете использовать Flexbox, чтобы довольно легко выровнять все элементы в одной строке;удаление абсолютной позиции со значка навигации, чтобы все работало нормально, это также позволяет удалить свойство float.Затем вы можете обернуть ваши ссылки в другой div (или тег ul) и нажать их вправо с помощью margin-left: auto

span {
  font-size: 30px;
  cursor: pointer;
}


/* Style the navigation bar */

.navbar {
  width: 100%;
  background-color: #555;
  display: flex;
  align-items: center;
}


/* Navbar links */

.navlinks{
  margin-left: auto;
}

.navbar a {
  text-align: center;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}
<body>
  <div id="main">
    <div class="navbar">
    <span onclick="openNav()">&#9776;</span>
      <div class="navlinks">
        <a href="#">Home</a>
      <a href="#">Search</a>
      <a href="#">Contact</a>
      <a href="#">Login</a>
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fas fa-search"></i></button>
      </div>
    </div>
  </div>
...