Блок nav-right
, который находится сейчас слева, должен быть прижат к правому краю. Мне нужно что бы у него остался position: fixed
, но когда я с ним пытаюсь переместить этот блок к правому краю, то ничего не происходит. Но при этом, когда я убираю position: fixed;
, я не могу выставить height: 100%;
.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
background-color: #F0F1F4;
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding: 0;
}
li {
padding-left: 20px;
}
a {
text-decoration: none;
color: #D1D4E4;
}
a:hover {
color: #fff;
}
input {
border: none;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #323546;
background-color: #D1D4E4;
opacity: .7;
}
input:hover {
opacity: .8;
transition: .3s;
}
input:focus {
outline: none;
background-color: #fff;
color: #000;
transition: .3s;
opacity: 1;
}
input::placeholder {
color: #323546;
}
button {
border: 0;
cursor: pointer;
}
button:focus {
outline: none;
}
/* Header */
.header {
display: flex;
align-items: center;
width: 100%;
height: 50px;
left: 0px;
top: 0px;
background: #323546;
box-shadow: 0px 4px 9px -2px rgba(0, 0, 0, 0.15);
}
.header-nav {
display: flex;
margin-left: auto;
padding-right: 30px;
font-size: 14px;
font-weight: 400;
}
.logo {
margin-left: 10px;
}
.search {
width: 141px;
height: 22px;
margin-right: 10px;
padding-left: 25px;
background-image: url(../icons/search.svg);
background-repeat: no-repeat;
background-position: center left 5px;
}
/* Side Bar */
.nav-right {
position: fixed;
display: block;
width: 50px;
height: 100%;
margin-left: auto;
background-color: #323546;
}
.nav-item {
width: 100%;
height: 50px;
background-color: #323546;
background-repeat: no-repeat;
background-position: center;
}
.nav-item:hover {
background-color: #41455C;
}
.nav-item-setting {
background-image: url(../icons/cog.svg);
}
.nav-item-calendar {
background-image: url(../icons/calendar.svg);
}
.nav-item-bell {
background-image: url(../icons/bell.svg);
}
.nav-item-trash {
background-image: url(../icons/trash.svg);
}
<header class="header">
<div class="logo">
<a href="#"><img src="img/logo.svg" alt="AirCargoSoft" width="142px" height="18px"></a>
</div>
<ul class="header-nav">
<li><a href="#">Заказы</a></li>
<li><a href="#">Контрагенты</a></li>
<li><a href="#">Поставщики</a></li>
<li><a href="#">Справочники</a></li>
</ul>
<input type="search" class="search" placeholder="Поиск">
</header>
<nav class="nav-right">
<div class="nav-items">
<a href="#"><button class="nav-item-setting nav-item"></button></a>
<a href="#"><button class="nav-item-calendar nav-item"></button></a>
<a href="#"><button class="nav-item-bell nav-item"></button></a>
<a href="#"><button class="nav-item-trash nav-item"></button></a>
</div>
</nav>