Я пытаюсь отредактировать панель навигации, но не получается ⇐ CSS

[Anonymous]

Мне нужна помощь с панелью навигации; Я стараюсь следовать руководствам YouTube и другим источникам, чтобы изменить свою панель навигации на понравившийся мне веб-сайт, но это меня не беспокоит, поскольку я забываю, какой синтаксис это делает, и ничего не могу с этим поделать.
Это моя панель навигации, и я хочу, чтобы она выглядела примерно так: панель навигации Crunchyroll.
Это мой штрих-код навигации HTML и CSS:

Код: Выделить всё

 



AniMAX










[url=#][i][/i]AniMax.[/url]


[url=#New]New Release[/url]
[url=#Manga]Manga/Novel[/url]
[url=#Movies]Movies[/url]
[url=#Episode]Episodes[/url]


[i][/i]
[i][/i]
[i][/i]

CSS-код:

Код: Выделить всё

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root{
--red:#120102;
--black:#000000;
--light-color:#181818;
--box-shadow: 0 1.5rem 1.5rem rgba(0,0,0,.1);

}

*{
font-family:"Nunito", sans-serif;
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
outline: none;
border: none;
text-transform: capitalize;
transition: all .2s linear;
}

.html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top:5.5rem;
}

header{
position: fixed;
top: 0;
left:0;
right:0;
background: rgb(26, 26, 26);
padding: 1rem 10%;
display:flex;
align-items: center;
justify-content: space-between;
z-index: 10000;
box-shadow: var(--box-shadow);
}

header .logo {
color: #fff;;
font-size: 2.5rem;
font-weight: bolder;
}

header .logo i{
color: var(--red);
}

header.navbar a{
font-size: 2.7rem;
border-radius: 2.5rem;
padding: 2.5rem 2.5rem;
color: white;
font-style: bold;
}

header .navbar a:hover{
color: var(--red);
background: #fff;

}

header .navbar a:active{
color: var(--red);
background: #fff;

}
header .icons i,
header .icons a{
cursor: pointer;
margin-left: .5rem;
height: 2.5rem;
line-height: 2.5rem;
text-transform: center;
font-size: 1.7rem;
border-radius: 100%;
background: rgb(100, 150, 243);
}
header .icons i,
header .icons a{
color: var(--red);
background: #fff;
transform: rotate(360deg);

}

/* media query */
@media(max-width: 768px){
.html{
font-size: 62.5%;

}
header{
padding: 1rem 2rem;
}
}
@media(max-width: 768px){
header .icons #menu-bars{
display: inline-block;
}
header .navbar{
position: absolute;
top: 100%;
left: 10px;
right: 10px;
background: var(--black);
border-top: .1rem solid rgba(0, 0, 0, .1);
border-bottom: .1rem solid rgba(0,0,0.2);
padding: 1rem;
clip-path: polygon(0 0, 100% 0,  0, 100% 0);
}

header .navbar .active{
clip-path: polygon(0 0, 100% 0,  0, 100% 0);
}

header .navbar a{
display:block;
padding:1.5rem;
margin: 1rem;
font-size: 2rem;
background: var (--red);
}
}

Кто-нибудь знает, что я сделал не так и как разместить логотип на панели навигации, не испортив панель навигации.
Я попробовал изменить путь к клипу или изменить несколько вещей, но ничего из этого не сработало. Я думаю, что есть расширение, о котором я не совсем осведомлен.

Подробнее здесь: https://stackoverflow.com/questions/789 ... -dont-work