I need help with the navigation bar; I try to follow YouTube and other source guides to modify my navigation bar to the website I like, but it won’t bug me since I forget what syntax that makes cause I can’t do anything about it.
This is my navigation bar:
And this is what I want it close to look like, crunchyroll nav bar:
This is my HTML nav bar code and 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);
}
}<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width-device-width" , initial-scale="2.0">
<title>AniMAX</title>
<!--font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!--custom css file link-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--header section start-->
<a href="#" class="logo"><i class="fas fa-infinity"></i>AniMax.</a>
<nav class="navbar">
<a href="#New">New Release</a>
<a href="#Manga">Manga/Novel</a>
<a href="#Movies">Movies</a>
<a href="#Episode">Episodes</a>
</nav>
<div class="icons">
<i class="fas fa-bars" id="bars-icon"></i>
<i class="fas fa-search" id="search-icon"></i>
<i class="fas fa-user" id="user-icon"></i>
</div>
</header>Does anyone knows what I did wrong, and how you put logo on navigation bar without ruining nav bar.
I tried changing the clip-path or altering a few things, but none of them worked. I do think there is an extension I am not fully aware of.
New contributor
Sebastian Pendragon is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2