Я хочу, чтобы мое меню было исправлено наверх

Мое меню скрыто/показать, но я хочу держать его в верхней части страницы, когда я прокручиваю.Я хочу, чтобы мое меню было исправлено наверх

HTML-:

<div class="menu"> 
    <ul> 
     <a href="#home"><li>Home</li></a> 
     <a href="#about"><li>About</li></a> 
     <a href="#servicces"><li>Services</li></a> 
     <a href="#projects"><li>Work</li></a> 
     <a href="#contact"><li>Contact</li></a> 
    </ul> 
</div> 
<div class="menu-toggle"> 
    <a href="#"><i class="fa fa-angle-double-down"></i></a> 
</div>

CSS-:

.menu { 
    display:none; 
    width:100%; 
    background:#fcfcfc; 
} 
.menu ul { 
    font-family: 'Raleway', serif; 
    font-weight:300; 
    height:110%; 
    list-style:none; 
    margin:0; 
    padding:10px; 
    text-align:center; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: space-around; 
} 
.menu ul li { 
    color:#333; 
    font-size:12px; 
    letter-spacing:2px; 
    padding:15px 0; 
    padding-left:5px; 
    padding-right:5px; 
    text-transform:uppercase; 
    transition:all .3s ease-in-out; 
} 
.menu ul li:hover { 
    text-align:center; 
    background:rgba(90,221,184,.6); 
    color:#fff; 
    font-weight:bold; 
    transition:all .3s ease-in-out; 
} 
.menu a { 
    text-decoration:none; 
    color: #333; 
} 
.menu-toggle { 
    background:none; 
    color: #333; 
    width:100%; 
    text-align:center; 
    padding:10px 0; 
    font-size:25px; 
} 
.menu-toggle a { 
    text-decoration:none; 
    color: #333; 
} 
.fa-angle-double-down{ 
    color:#fcfcfc; 
    transition:all .3s ease-in-out; 
} 
.fa-angle-double-down:hover{ 
    color:#5ADDB8; 
    transition:all .2s ease-in-out; 
    -ms-transform: rotate(180deg); /* IE 9 */ 
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ 
    transform: rotate(180deg); 
}

И JS:

$(document).ready(function(){ 
    $(".menu-toggle a").click(function(){ 
     $(".menu").slideToggle(700); 
    }); 
});

Я хотел бы, чтобы стрелка на верхней части, и, когда это щелкнул, он перемещается вниз и получает меню сверху, после закрытия меню стрелка возвращается в исходное место.

Посетите меню codepen: HERE

Посетите мою страницу попробовать: HERE

источник

2015-05-23 Giulia Christie

возможно дубликат [строки меню Leave закрепленную на вершине при прокрутке] (http://stackoverflow.com/questions/13274592/leave-menu-bar-fixed-on- top-when-scrolled) –

Добавьте следующее в CSS меню:

position:fixed; 
    top:0;

И добавьте следующее в стрелку css:

position:relative;

Это должно делать то, что вы собираетесь делать.

Edit:

.menu-container{ 
    position: fixed; 
    top:0; 
} 
.menu{ 
    display: block; 
    position: relative; 
} 
.menu-toggle{ 
    margin:0 auto; 
    position:relative; 
}

источник

2015-05-23 19:11:43 Ravi

Фиксированное положение сработало, но относительный (стрелка) этого не сделал. Он остается на одном месте, но не в нижней части меню. Вы можете увидеть [здесь] (http://codepen.io/giuliachristie/full/wazbyv/) –

Похоже, вы только изменили меню css, а не стрелку css. Я не вижу, что свойство 'position: relative' добавлено в CSS css (' fa-angle-double-down'). Также удалите 'margin-top: 0;'. Соответственно отредактировал мой сценарий. – Ravi

Извините, я изменил меню-Toggle css, но я исправил, как вы сказали, и ошибка продолжается ... –

Вы можете использовать

<div class="menu navbar-fixed-top"></div>

источник

2015-05-23 18:37:45 cabey77

Но как я могу включить этот новый класс? –

Это класс начальной загрузки, который фиксирует этот div в верхней части. – cabey77

Я хочу, чтобы мое меню было исправлено наверх

ответ

Смежные вопросы