Remove header from Container

newsoul Published at Dev

newsoul

I'm trying to get the header out of the container so that I can make the header to stretch the full width of the screen (i've been messing with it for hours without luck before realizing the container was preventing it). Here's the HTML:

</head>

<body <?php body_class(); ?>>

<div id="wrapper">  

<div id="header">

    <div class="container clearfix">

        <div id="logo">         
            <a href="<?php echo home_url(); ?>" class="logo_img">
                <img src="<?php echo $of_option['st_logo_image'] ?>" alt>
            </a>
        </div>

        <div id="navigation">
            <?php wp_nav_menu(array('menu' => 'custom_menu')); ?> 

            <?php if($of_option['st_responsive']) responsive_select_nav() ?>
        </div>        

    </div>

</div>

Shomz

You need to learn how to properly structure an HTML layout. I separated the header and put it before the container so they are independent.

#header {background: #eee; height: 50px;}
.container {background: #ccc; width: 200px; margin: auto; height: 200px;}

<div id="header">Header here</div>

<div class="container clearfix">

  <div id="logo">
    <a href="" class="logo_img">
      <img src="" alt="Logo here">
    </a>
  </div>

  <div id="navigation">
    PHP stuff here
  </div>

</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.