Daniel Hobbs Daniel Hobbs - 4 months ago 6x
CSS Question

Splitting header DIV to allow Nav inside row

So I currently have my header div working, but with my menu under the div, I need to move my menu into the same div area as the logo, so it shows more in line with the logo itself, rather than slightly below.

I am thinking I just need to redo the header all together, which is fine, but I am wondering if I am able to just edit what I have currently.. Like can two div layers overlay in this sense? I do not mind coding the menu in manually if easier (using the html code links), rather than using the wordpress menu php calls.

Website: http://outside.hobhob.uk/test/

Code I am editing:

<header id="header" role="banner">
<div class="headwidth">
<h1 class="logo">
if (!empty($data['iter_normal_site_logo'])) {
<a href="<?php echo home_url(); ?>"><img src="<?php echo $data['iter_normal_site_logo']; ?>"></a>
} else {
<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
<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')); ?>


#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;
.logo a {
margin:0 auto;


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

Thanks loads! :)


How about using absolute on the menu on the bottom?

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

The code above will give you freedom to move the main nav.