Как я могу добавить липкий заголовок, который перекрывает мой основной заголовок навигации? - PullRequest
Новая
       35

Как я могу добавить липкий заголовок, который перекрывает мой основной заголовок навигации?

0 голосов
/ 27 декабря 2018

<div class="sticky-header nav-row stick"> <span class="sticky-text"> <i class="fa fa-phone"></i> <strong>Don't wait another day. Your marketing solution is just a phone call away.</strong> </span> <a class="sticky-link" href="tel:561-396-9895" 561 396 9895</a> </div>

Вот код, который я скомпилировал, но он не работает на WordPress ... Как мне его настроить?Также возможно ли это сделать с помощью css?

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Возможно, вы могли бы использовать z-index css: 

    .stickyHeader {
    position: sticky;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    background-color: lightgreen;
    height: 50px;
    }
    
    header {
    position: fixed;
    height: 30%;
    width: 100%;
    background-color: gray;
    }
<header>Header</header>

    <div class='stickyHeader'>
    <p>Example (under this is the header)</p>
    </div>


    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

это помогает?

0 голосов
/ 27 декабря 2018

Для этого вам нужен css, некоторые могут даже сказать js, но вы не предоставили никакого кода css, чтобы помочь придумать ответ.Попробуйте следовать этому руководству по школам w3

https://www.w3schools.com/howto/howto_js_sticky_header.asp

. Это должно помочь решить ваши проблемы.

, чтобы быстро исправить, попробуйте добавить код ниже всвой класс липкого заголовка или создайте новый класс или идентификатор для него 

position: fixed;
top: 0;
left: 0;
z-index: 1000;

убедитесь, что ваш основной заголовок навигации имеет свойство z-index меньше 1000

...