Вот HTML & CSS Код. У меня проблема, когда я изменяю размер вкладки. Ссылка, которая называется меню Phoenix, будет переносом слов.
.page_header {
position: relative;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 10px 20px;
background-color: rgb(60, 157, 221);
}
.logo {
width: 220px;
text-decoration: none;
color: rgb(212, 212, 212);
background-color: red;
}
.category-search_container {
width: 100%;
margin: 10px;
position: relative;
display: flex;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(134, 65, 65);
border-radius: 25px;
padding: 10px;
}
.category {
padding: 3px;
border: 0px;
outline: none;
}
.search {
width: 100%;
min-width: 220px;
padding: 3px;
border: 0px;
outline: none;
}
.search_btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0px 5px;
background-color: transparent;
border: 0px;
margin-top: 2px;
}
.navbar{
display: flex;
align-items: center;
}
.navbar_menu, .navbar_megamenu {
width: 90px;
display: flex;
justify-content: center;
align-items: flex-end;
cursor: pointer;
padding: 3px;
color: rgb(255, 255, 255);
background-color: transparent;
border: 0px;
outline: none;
}
.navbar_menu i, .navbar_megamenu i {
margin: 0px 5px;
}
.search_outside, .heart, .shopping_cart, .user {
position: relative;
display: flex;
margin: 0px 12px;
color: rgb(255, 255, 255);
cursor: pointer;
}
.heart::after {
content: " 0 ";
position: absolute;
margin-top: -14px;
margin-left: -4px;
display: inline-block;
width: 16px;
height: 17px;
border-radius: 20px;
text-align: center;
color: rgb(0, 140, 255);
background-color: rgb(255, 255, 255);
}
.shopping_cart::after {
content: " 3 ";
display: inline-block;
position: absolute;
margin-top: -14px;
margin-left: -4px;
width: 16px;
height: 17px;
border-radius: 20px;
text-align: center;
font-weight: normal;
color: rgb(0, 140, 255);
background-color: rgb(255, 255, 255);
}
<header class="page_header">
<a href="index.html" class="logo">Phoenix nav</a>
<form class="category-search_container">
<select name="All Categories" id="categories" class="category">
<option value="All Categories">All Categories</option>
<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
<option value="Category 3">Category 3</option>
<option value="Category 4">Category 4</option>
<option value="Category 5">Category 5</option>
<option value="Category 6">Category 6</option>
<option value="Category 7">Category 7</option>
<option value="Category 8">Category 8</option>
<option value="Category 9">Category 9</option>
<option value="Category 10">Category 10</option>
</select>
<input type="search" class="search" placeholder="Search over 10,000 products">
<button type="submit" class="search_btn"><i class="fas fa-search search_icon"></i></button>
</form>
<nav id="navigation" class="navbar">
<button class="navbar_menu">Menu<i class="fas fa-chevron-down"></i></button>
<button class="navbar_megamenu">Megamenu<i class="fas fa-chevron-down"></i></button>
<i class="fas fa-search search_outside"></i>
<i class="far fa-heart heart"></i>
<i class="fas fa-shopping-cart shopping_cart"></i>
<i class="far fa-user user"></i>
</nav>
</header>