I was making a webpage that has a fixed header at the top. The header has the logo, some categories, and a search button. Here's the 
CSS
.body{
background-color: #F2B84B;
}
.logo, .search{
color:#fff;
font-size:2rem;
padding:10px;
vertical-align: middle;
line-height: normal;
}
.primary{
background-color:#04B2D9
}
nav{
display:flex;
justify-content:space-between;
font-family: 'Anton', sans-serif;
}
nav ul{
display:flex;
overflow-x:auto;
}
nav ul li {
list-style: none;
padding:0 10px;
text-transform: uppercase;
font-size:2rem;
}
.btn{
color:#BF5B04;
background-color:#F28705;
border:1px solid #592202;
margin:0 10px;
}
HTML
<html>
<head></head>
<body class="body">
<nav class="primary">
<div class="logo">LOGO</div>
<ul>
<li class="btn">Home</li>
<li class="btn">Movies</li>
<li class="btn">Technology</li>
<li class="btn">Games</li>
<li class="btn">Sport</li>
<li class="btn">Lifestyle</li>
<li class="btn">Education</li>
</ul>
<div class="search">SEARCH</div>
</nav>
</body>
</html>
working code here : https://codepen.io/non_tech_guy/pen/PoKoYVN
Also your css can become hard to read when you become to specific, I think its good practice to use as little specificity as necessary to get the task done. here is an example of your code header div.categories>div>nav>ul>li.current-tab
CodePudding user response：
I think it can help you.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', Helvetica, Arial, sans-serif;
}
html, body{
height: 100%;
width: 100%;
background-color: white;
color: black;
font-size: 1rem;
}
header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
overflow-x: auto;
background-color: white;
box-shadow: 0 1px 20px rgb(0,0,0,0.15);
}
header::-webkit-scrollbar {
width: 0;
height: 10px;
background-color: transparent;
}
header::-webkit-scrollbar-thumb {
border-radius: 20px;
border: 2px solid transparent;
background-clip: padding-box;
background-color: #dddddd;
}
.header {
max-width: unset;
width: auto;
display: grid;
grid-template-columns: 150px min-content min-content 110px;
grid-column-gap: 20px;
}
header div.logo{
padding: 0 10px 0 25px;
}
header div.logo-category{
color: white;
background-color: rgb(255, 103, 103);
max-width: 150px;
border-radius: 5px;
height: 30px;
padding: 2px 10px;
text-align: center;
align-self: end;
margin-bottom: 10px;
}
header div.categories{
background: linear-gradient(225deg, rgb(3, 78, 238), rgb(255, 34, 34));
margin-left: 15px;
overflow-x: auto;
display: flex;
justify-content: center;
align-items: center;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
header div.categories>div>nav>ul{
list-style: none;
white-space: nowrap;
}
header div.categories>div>nav>ul>li{
display: inline;
font-size:25px;
text-transform: uppercase;
margin-right: 18px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
header div.categories>div>nav>ul>li.current-tab{
-webkit-text-fill-color: white;
padding: 2px 10px;
border-radius: 5px;
-webkit-background-clip: unset;
background: linear-gradient(225deg, rgb(3, 78, 238), rgb(255, 34, 34));
color: white;
}
header div.search{
background-color: rgb(0, 38, 255);
color: white;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 1px 20px rgb(0,0,0,0.15);
margin: 10px 30px;
border-radius: 10px;
transition: 0.3s;
cursor: pointer;
}
header div.search:hover{
color: rgb(0, 38, 255);
background-color: white;
}<header>
<div class="header">
<div class="logo">
<svg width="100" height="61" viewBox="0 0 403 244" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M120.6 54H184.2C199.4 54 212.8 56.9333 224.4 62.8C236.133 68.5333 245.2 76.6667 251.6 87.2C258.133 97.7333 261.4 110 261.4 124C261.4 138 258.133 150.267 251.6 160.8C245.2 171.333 236.133 179.533 224.4 185.4C212.8 191.133 199.4 194 184.2 194H120.6V54ZM182.6 167.4C196.6 167.4 207.733 163.533 216 155.8C224.4 147.933 228.6 137.333 228.6 124C228.6 110.667 224.4 100.133 216 92.4C207.733 84.5333 196.6 80.6 182.6 80.6H153V167.4H182.6Z" fill="url(#paint0_linear)"/>
<path d="M355 194L354.8 110L313.6 179.2H299L258 111.8V194H227.6V54H254.4L306.8 141L358.4 54H385L385.4 194H355Z" fill="url(#paint1_linear)"/>
<path d="M55.6 80.4H10.8V54H132.8V80.4H88V194H55.6V80.4Z" fill="url(#paint2_linear)"/>
</g>
<defs>
<filter id="filter0_d" x="0.800003" y="54" width="394.6" height="170" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="270" y1="122" x2="122.5" y2="122" gradientUnits="userSpaceOnUse">
<stop stop-color="#CC78FF" stop-opacity="0.15"/>
<stop offset="1" stop-color="#FF008A"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="393.5" y1="122" x2="211" y2="122" gradientUnits="userSpaceOnUse">
<stop stop-color="#011AFF" stop-opacity="0.15"/>
<stop offset="1" stop-color="#FF00E5"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="152.5" y1="122" x2="10" y2="122" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF37AF" stop-opacity="0.15"/>
<stop offset="1" stop-color="#FF0000"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="logo-category">Home</div>
<div class="categories">
<div>
<nav>
<ul>
<li class="current-tab"><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-newspaper-o"></i> News</li>
<li><i class="fa fa-film"></i> Movies</li>
<li><i class="fa fa-microchip"></i> Technology</li>
</ul>
</nav>
</div>
</div>
<div class="search"><i class="fa fa-search"></i></div>
</div>
</header>