Как сделать фиксированное меню?

Question

[maestro07]

<div id="page" class="site">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-my-primary-menu-container">
            <ul id="primary-menu" class="menu">
                <li>
                        <a href="#home">Home</a>
                </li>
                <li>
                        <a href="#home">Home 1</a>
                </li>
                <li>
                        <a href="#home">Home 3</a>
                </li>
                <li>
                        <a href="#home">Home 2</a>
                </li>
            </ul>
        </div>
    </nav>

#site-navigation {
    position: fixed;
    min-height: 50px;
    width: 100%;
    background: #853636;
    border-top: 1px solid #e1e1e1;
}

ширину разве не берет от род div.
как сделать что на меню не наезжали другие элементы. чтобы меню всегда был перед всеми элементами?

Answer 1

[Одиночка Айс]

Добавьте Вашему меню z-index:100; хотя бы, тогда оно будет перед всеми элементами.

Answer 2

[iBird Rose]

ширину разве не берет от род div.

нет. у fixed нет родителя. он работает от window

как сделать что на меню не наезжали другие элементы. чтобы меню всегда был перед всеми элементами?

поставь z-index: 100; к примеру

Comments

[maestro07]

как быть в width? как сделать ее? и еще один, когда нажимаю а секции меню страница передвигается в ту секцию, но видом не все ок


как сделать чтобы так было при переходе

[iBird Rose]

maestro07, ну к примеру фиксировать прозрачный блок, а внутри него уже сделать свой container красным цветом.
2) тут сам уже думай можешь padding у якорей увеличить, чтобы при переходе не перекрывал. либо сам блок якоря поставить выше заголовка.

[maestro07]

iBird Rose, фиксировать прозрачный блок? как?

[iBird Rose]

maestro07, ну у тебя на скрине фиксирован красный блок. а ты оберни его во что нибудь и фиксируй обертку. поставь top: 0; left: 0; width: 100%;
а уже этот красный блок выравнивай по центру этой обертки

[maestro07]

iBird Rose,

добавил
css:
.nav_menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
но меню не по центру пробывал разные варианты

[iBird Rose]

maestro07, грустно тебе