Хочу сделать шапку как на фото:
Теперь это выглядит так: заголовок
Вот html-код:
<header class = "header">
<div class = "container">
<nav class = "navBar">
<div class = "navBar-wrapper">
<div class = "img-logo">
<img src = "./img/logo.jpg" alt = "" srcset = ""></div>
<div class = "home">Home</div>
<div class = "aboutUs">About us</div>
<div class = "findSpace">Find space</div>
<div class = "share-space">Share space</div>
<div class = "promoteSpace">Promote space</div>
</div>
</nav>
</div>
</header>
А вот css:
Есть ли способ добавить пробел между логотипом и переместить навигацию влево?
body{
font-family:"Poppins",sans-serif;
font-weight: 400;
}
.container{
max-width: 1110px;
margin-left: auto;
margin-right: auto;
}
.header{
height: 112px;
width: 100%;
background: #fff;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.navBar-wrapper{
display: flex;
align-items: center;
justify-content: space-between;
}
.navBar-wrapper div{
font-size: 16px;
line-height: 24px;
color: #323232;
margin-top: 28px;
}
.home{
font-weight: 700 !important;
color:#F78434 !important;
}
Как сделать пробел между логотипом и навигацией?
Пытался получить доступ ко второму ребенку с помощью nth-child(2), но это не сработало.
Фрагмент кода: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html
Привет, Лора! Есть много разных способов сделать это довольно просто, а также сделать ваше главное меню намного проще. Вместо того, чтобы помещать каждый элемент меню в div, посмотрите, что вы можете найти, чтобы поместить все меню в список <ul>
, а затем выровнять этот ul
по правой стороне (что должно предоставить то, что вам нужно).
Вы можете сделать это, просто применив margin-right: auto;
к img-logo
-контейнеру.
Обратите внимание, что это повлияет на родительские контейнеры justify-content: space-between;
, поэтому я бы предложил применить другое свойство CSS, например gap: 10px;
, к navBar-wrapper
.
В качестве альтернативы вы можете поместить все ссылки на панели навигации в другой контейнер для лучшего контроля на панели навигации.
body {
font-family: "Poppins", sans-serif;
font-weight: 400;
}
.img-logo img {
max-width: 100px;
}
.img-logo {
margin-right: auto;
}
.container {
max-width: 1110px;
margin-left: auto;
margin-right: auto;
}
.header {
height: 112px;
width: 100%;
background: #fff;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.navBar-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.navBar-wrapper div {
font-size: 16px;
line-height: 24px;
color: #323232;
margin-top: 28px;
}
.home {
font-weight: 700 !important;
color: #F78434 !important;
}
<header class = "header">
<div class = "container">
<nav class = "navBar">
<div class = "navBar-wrapper">
<div class = "img-logo">
<img src = "https://4m4you.com/wp-content/uploads/2020/06/logo-placeholder.png" alt = "" srcset = ""></div>
<div class = "home">Home</div>
<div class = "aboutUs">About us</div>
<div class = "findSpace">Find space</div>
<div class = "share-space">Share space</div>
<div class = "promoteSpace">Promote space</div>
</div>
</nav>
</div>
</header>
Пожалуйста, создайте фрагмент, чтобы мы могли поиграть с ним.