Блог

Главная - Вопросы по программированию - Логотип не находится в той же строке, что и навигационные ссылки

Логотип не находится в той же строке, что и навигационные ссылки

#html #css #menu #header

#HTML #css #меню #заголовок

Вопрос:

Создал веб-сайт с меню заголовка, которое меняется на меню гамбургера, когда я перехожу к мобильной версии.

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

Я мог бы решить проблему, поместив класс «logo-container» за пределы «navigation», но тогда меню гамбургера не будет работать должным образом (потому что добавление logo-container в навигационный div решило другую проблему).).

 .logo-container,.nav-links,.calendar {
  display: flex;
}

.logo-container {
  flex: 1;
  position: relative;
  left: 5%;
}

.logo {
  font-weight: 400;
  margin: 5px;

}

.logo-container img{
  max-width: 120px;
  max-height: 120px;
}

/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }

nav {
  flex: 2;
}
.nav-links {
  justify-content: space-around;
  list-style: none;
}

.nav-link {
  color: var(--clr-dark);
  font-size:20px;
  text-decoration: none;
  font-weight: 600;
}  
 <header class="header" id="myHeader">
        
  <nav role="navigation">
    
    <div class="logo-container" id="myLogo"> 
      <a href="#"><img src="./img/logo.png"  alt="logo"/> </a>
    </div>

    <div class="hamburger" id="hamburgerID">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
    
    <ul class="nav-links">
      <li><a class="nav-link" href="#details">DETAILS</a></li>
      <li><a  class="nav-link" href="#description">DESCRIPTION</a></li>
      <li><a   class="nav-link" href="#aboutus">ABOUT US</a></li>
    </ul>
    
  </nav>
</header>

Ответ №1:

Вы можете использовать вложенный flexbox. Отредактированный код объясняется в комментариях.

 .logo-container,
.nav-links,
.calendar {
  display: flex;
}

.logo-container {
  position: relative;
  left: 5%;
}

.logo {
  font-weight: 400;
  margin: 5px;
}

.logo-container img {
  max-width: 120px;
  max-height: 120px;
}


/* Logo container JS*/

.logo-container {
  display: 'none'
}

.logo-container.open {
  display: 'block'
}

nav {
  flex: 2;
  display: flex; /* Make nav a flexbox container */
}

.nav-links {
  justify-content: space-around;
  list-style: none;
  flex: 1; /* Let it occupy rest of the container */
  align-items: center; /* Align to the vertical center because logo is bigger. */
}

.nav-link {
  color: var(--clr-dark);
  font-size: 20px;
  text-decoration: none;
  font-weight: 600;
}  
 <header class="header" id="myHeader">

  <nav role="navigation">

    <div class="logo-container" id="myLogo">
      <a href="#"><img src="http://placehold.it/120x120" alt="logo" /> </a>
    </div>

    <div class="hamburger" id="hamburgerID">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>

    <ul class="nav-links">
      <li><a class="nav-link" href="#details">DETAILS</a></li>
      <li><a class="nav-link" href="#description">DESCRIPTION</a></li>
      <li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
    </ul>

  </nav>
</header>