Интересует главный вопрос. Как сделать так, что бы при удалении или при замене логотипа, меню не съезжало.
Нужно вот так:
Мой код:
HTML
header.header
div.container
nav.navbar
ul.navbar__menu
li.navbar-item: a(href="#") ABOUT ME
li.navbar-item: a(href="#") PORTFOLIO
li.navbar-item.logo: a(href="#") JD
li.navbar-item: a(href="#") MY BLOG
li.navbar-item: a(href="#") CONTACT ME
CSS
.navbar {
.logo {
display: flex;
align-items: center;
justify-content: center;
background: url("../img/logo/logo-bg.png") no-repeat;
width: 302px;
height: 302px;
margin-top: 15px;
& a {
font-family: @sea-font;
font-size: 188px;
line-height: 166px;
text-transform: uppercase;
letter-spacing: 0.94px;
color: #f6edd8;
}
}
&__menu {
display: flex;
align-items: center;
justify-content: space-around;
}
&-item {
margin-top: -15px;
& a {
font-family: @bazar-font;
font-size: 54px;
line-height: 22px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
color: @menu-color;
}
}
}
