2014-01-22 3 views
-5

Привет Я пытаюсь сделать мое меню навигации на верхней части моей страницы.Липкая панель навигации в заголовке

Панель поиска help находится сверху, но я хочу, чтобы главная была навигация и на том месте, где находится StackExchange, но больше в остальном, чтобы быть моим логотипом.

И когда я прокручиваю вниз, nav menu-header складывается сверху и содержимое идет за ним.

У меня нет кода, потому что я молюсь, и я не знаю, с чего начать. Я пытался сделать все в одном div, но ничего не произошло ... после этого я попытался их исправить (я, ve сделал их один под другим), но только навигационное меню исправлено, и заголовок исчез, но когда я исправляю заголовок ... невозможно прокрутить вниз .... Я действительно буду оценивать, если кто-то может дать мне пример HTML и CSS ... .because Я понятия не имею, как я могу это сделать

+1

использовать интернет-дурачок! – matpol

+3

«У меня нет кода, потому что я разозлился, и я не знаю, с чего начать. Я пытался сделать все в одном div, но ничего не произошло». Это похоже на то, чтобы сказать вашему автомеханику, что вы не знаете, У тебя есть машина, чтобы показать ему, но ты знаешь, что он сломан, он может исправить это, хотя он находится в канаве в трех уездах. –

ответ

7

Настройте свой заголовок, чтобы иметь это свойство CSS, как это:

BASIC HTML:

<html> 
    <head><title>Sticky header</title><head> 
    <body> 
     <div id="header>Your nav goes here</div> 
     <div id="content">Content things go here.</div> 
    </body> 
</html> 

CSS

#header { 
    position: fixed; 
    top: 0; 
    z-index: 500; 
    height: 45px; 
} 

#content { 
    padding-top: 50px; 
} 

с этим вы будете уверены, что ваш заголовок будет всегда видимым независимо от того, если пользователь будет прокручивать вниз, а г-индекс, чтобы убедиться, что заголовок будет всегда быть на вершине другого контента, если у вас есть модалы, укажите модальности z-index: 1000; так что вы убедитесь, что модалы не будут обрезаны вашим заголовком.

Надеюсь, это поможет.

+0

Это часть решения, хотя нет никакого способа действительно сказать, организовал ли OP свою разметку, чтобы это сработало. Вам также необходимо установить некоторые верхние дополнения или поля, чтобы убедиться, что содержимое, находящееся под ней, не будет скрыто, так как «position: fixed» удаляет div #header из потока документов. –

+0

Это просто пример, чтобы применить его к его разметке. Тем не менее, я просто поместил в таблицу базовый html-пример. – taxicala

+1

Несомненно, это была не столько критика (как по крайней мере, вы предоставили какой-то код и объяснение!) Так же, как и уточнение. –

0

попробовать это:

.navbar { 
position: fixed; 
top:0; 
right: 0; 
left: 0; 
z-index: 1030; 
} 
Смежные вопросы