내비게이션을 허용하도록 머리글 DIV 분할

Question

그래서 현재 내 머리글 div가 작동하지만 div 아래에있는 메뉴를 사용하여 내 메뉴를 로고와 동일한 div 영역으로 이동해야하므로 줄이 더 많이 표시됩니다 약간 아래보다는 로고 그 자체.

머리말을 모두 다시 써야한다고 생각합니다.하지만 현재 가지고있는 것을 편집 할 수 있는지 궁금합니다. 이런 의미로 두 개의 div 레이어를 오버레이 할 수 있을까요? 나는 수동으로 메뉴를 코딩하는 것이 더 쉽다면 (HTML 코드 링크를 사용하여), wordpress 메뉴 PHP 호출을 사용하는 것보다 쉽다.

웹 사이트 : 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; 
} 

위의 코드는 메인 탐색을 자유롭게 이동할 수있게 해줍니다.