Разбиение заголовка DIV, чтобы разрешить Nav внутри строки

Question

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

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

Сайт: http://outside.hobhob.uk/test/

код я редактирую:

<header id="header" role="banner"> 
    <div class="headwidth"> 
     <h1 class="logo"> 
      <?php 
       if (!empty($data['iter_normal_site_logo'])) { 
      ?> 
        <a href="<?php echo home_url(); ?>"><img src="<?php echo   $data['iter_normal_site_logo']; ?>"></a> 
      <?php 
       } else { 
       ?> 
        <a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a> 
       <?php 
       } 
      ?> 
     </h1> 
     <nav id="main-nav"> 
     <?php wp_nav_menu(array('theme_location' =>'main-nav','fallback_cb'=>'default_main_nav','container'=>'wda','depth'=>2,'menu_class'=>'sf-menu')); ?> 
    </nav> 
    </div> 
</header> 

CSS:

#header { 
    position: relative; 
    left: 0; 
    z-index: 10000; 
    width: 100%; 
    z-index: 9; 
    padding-top: 50px; 
    background-color: #fff; 
    -moz-box-shadow: 0 0 20px #aaa; 
    -webkit-box-shadow: 0 0 20px #aaa; 
    box-shadow: 0 0 20px #aaa; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
    -ms-transition: all 1s; 
    transition: all 1s; 
} 
.headwidth { 
    max-width: 1000px; 
    width: 100%; 
    position: relative; 
    margin: 0 auto; 
} 
.logo { 
    color: #29251F; 
    font-size: 84px; 
    line-height: 1.1; 
    word-wrap: break-word; 
    font-weight: 800; 
    text-transform: uppercase; 
    margin: 0; 
    text-align:left; 
} 
.logo a { 
    margin:0 auto; 
} 

и:

#main-nav { 
    padding: 20px 0 0; 
} 

Благодарности нагрузки! :)

Answer 1

Как насчет использования абсолютного в меню внизу?

#main-nav { 
text-align: right; 
position: absolute; 
bottom: 29px; 
right: 0px; 
} 

Вышеупомянутый код предоставит вам свободу передвижения главного навигатора.