Панель навигации с большим окном поиска работает некорректно - PullRequest
0 голосов
/ 11 июля 2020

Вот HTML & CSS Код. У меня проблема, когда я изменяю размер вкладки. Ссылка, которая называется меню Phoenix, будет переносом слов. image

.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>
...