Прозрачный фиксированный заголовок с flexbox - PullRequest
Новая
       33

Прозрачный фиксированный заголовок с flexbox

1 голос
/ 06 марта 2019

Я пытался сделать страницу с фиксированным прозрачным заголовком, используя flexbox.Сначала я обнаружил, что каким-то образом это вызывает конфликт (фиксированное позиционирование и гибкость), и свойства justify-content или align-items не будут работать с дочерними элементами родительского элемента flex-fixed обертки.Дочерние элементы фиксированного родителя не будут располагаться надлежащим образом.

Но потом я увидел это https://templated.co/industrious, и как-то это работает!Поэтому я не могу понять, почему это не работает с моим кодом.Мне кажется, я не делаю это иначе.

Div-fixed-flex-div оборачивает элементы LOGO, NAV и search (svg), но я не могу настроить параметр justify-content или align-items для работы с div-заголовками и навигацией. 

    body {
        height: 2500px;
    }
    
    .header-fixed-flex {
        max-width: 150rem;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        transform: translate(19.2rem, 0);
    }
    
    .header_nav {
        max-width: 155rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .header_logo {
        max-height: 9.7rem;
        background: rgba(3, 12, 77, 0.4);
    }
    
    .header_link {
        padding: 0.5rem;
    }
    
    .navigation {
        background: rgba(191, 218, 218, 0.4);
        display: flex;
    }
    
    .navigation_list {
        list-style: none;
        letter-spacing: 0.4rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        height: 100%;
    }
    
    .navigation_item:not(:last-child) {
        margin-right: 3rem;
    }
    
    .navigation_link:link, .navigation_link:visited {
        color: #fff;
        text-decoration: none;
        padding: 0.8rem;
    }
    
    .navigation_button {
        border: none;
        background: none;
        display: flex;
        align-items: center;
    }
    
    .navigation_search-input {
        border: none;
        background: rgba(255, 255, 255, 0.1);
        outline: none;
        width: 5rem;
    }
    
    .navigation_icon {
        padding: 0.5rem;
        width: 3rem;
        fill: #fff;
    }
    
    .hero_img {
        background: url(https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/jp-mountain@2x.jpg) top/cover;
        height: 100vh;
    }
    <div class="header-fixed-flex">
        
        <div class="header_nav">
            <header class="header_logo">
                <a href="index.html" class="header_link">LOGO</a>
            </header>
          
            <nav class="navigation">
                <ul class="navigation_list">
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Profile</a>
                    </li>
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Services</a>
                    </li>
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Articles</a>
                    </li>
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Contact</a>
                    </li>
                </ul>
                <button class="navigation_button">
                    <input type="text" class="navigation_search-input" id="search-query"/>
                    <label for="search-query" class="navigation_search_label"></label>
                    <svg class="navigation_icon"></svg>
                </button>
            </nav>
        </div>
    </div>
    
    <section class="hero">
        <div class="hero_img"></div>
    </section>

Или кодовая ссылка с scss https://codepen.io/tantoniou/pen/QoGmba

Ответы [ 2 ]

1 голос
/ 06 марта 2019

Удалите элемент header-fixed-flex и примените этот стиль к header_nav 

width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: 100;
display: flex;
justify-content: space-between;
0 голосов
/ 06 марта 2019

Очень сложно определить, что вы хотите от вашей записи без предоставленного дизайна или каркаса, но мое первоначальное предположение состоит в том, что все происходит не так, как вы ожидаете, потому что .header-fixed-flex имеет только одного ребенка.Так что, возможно, установка flex: 1 или просто width: 100% на .header_nav заставит все работать так, как вам нравится.

...