Как создать боковую панель фиксированной позиции для моего проекта Wordpress

Question

Я создаю сайт Wordpress с фиксированным меню боковой панели с левой стороны и основным содержимым справа в контейнере. Я не уверен, что лучше всего подходит для кодирования меню, потому что в настоящее время я кодировал меню, чтобы сидеть за пределами основного контейнера div. Я почему-то заметил, что размер экрана рабочего стола не достаточно широкий, и мой контент переполняется в меню слева, а также некоторые из моего меню обрезаются внизу (некоторые из ссылок не отображаются). Я Не уверен, что это имеет какое-либо отношение к высоте экрана?

HTML для меню выглядит следующим образом:

<div id="menuBar"> 
    <img class="logo" src="wp-content/themes/starkers-master/images/lulu-logoi-01.png" width="180" height="250" alt="Lulu Plews Logo"/>   
    <ul> 
     <?php wp_nav_menu(array('theme_location' => 'header-menu')); ?> 
    </ul> 
</div> 

КНБ:

.menu-menu-1-container { 
    position: fixed; 
    left: 8.8%; 
    top: 300px; 
    border-right: 1px solid #D1D2D4; 
    height: 10000px; 
} 

#menuBar { 
    position: fixed; 
    left: 8.15%; 
    top:0; 
    padding: 0 30px 0 0; 
    border-right: 1px solid #D1D2D4; 
    margin: 0 auto 0 auto; 
} 

Я просто хочу несколько советов о том, как я должен закодировать это и есть ли или нет что-то не так с мой код? Я думаю, что это не что-то очевидное, но я не знаю, что это может быть?

Answer 1

Я выяснил решение моей проблемы; В то время я не понимал, что использование position: fixed; на элементе выводит его из потока.

Прежде всего неосознанно я добавил position:fixed; в родительский элемент>.menu-menu-1-container, который не требовался и в любом случае не помог. Я также удалил все остальные стили из этого div, поскольку они были излишними.

Во-вторых, я исправил стили на #menuBar; Я добавил к нему 100% высоты и удалил margin:0 auto; (что ничего не делало, поскольку я не объявлял ширину, также не нужно было центрировать, чтобы это было избыточно). Затем я добавил ширину до #menuBar и удалил атрибут в левом стиле.

В-третьих, я нашел, что правильно иметь фиксированную боковую панель за пределами основного контейнера div и стилизовать основной контейнер div с левым краем и отступом.

Вот ссылка на fiddle со всем моим кодом и фрагментом моего CSS ниже:

#menuBar { 
    position: fixed; 
    width: 150px; 
    background-color: #DDD; 
    font-size: 18px; 
    top: 0; 
    bottom: 0; 
    border-right: 1px solid #D1D2D4; 
} 

#menuBar a { 
    display:block; 
    padding:15px; 
    color: #000; 
    text-decoration: none; 
} 
.content { 
    position: relative;    
    margin-left: 200px; 
} 

Надеется, что это помогает кто-то борется с чем-то же просто, как фиксированным положением боковой панель.