分割標題DIV允許在行內部導航

所以我現在有我的標題div工作，但是我的菜單在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; 
}

由於負荷！ :)

來源

2016-06-13 Daniel Hobbs

如何在底部的菜單上使用絕對？

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

上面的代碼可以讓您自由移動主導航。

來源

2016-06-13 13:59:41

完美，這工作:) 由於某種原因，我的下拉是現在有點毛病..不知道這是鉻或編碼..我猜我應該在其他領域，如我的'UL '代碼區.. 謝謝！ –

很高興爲你工作。：d –

分割標題DIV允許在行內部導航

回答

相關問題