How to put an image header over menu and section?

Model of what I want to do

First of all, I’m using a child theme for wordpress (TwentyThirteen Parent Theme). I have an image to use as header there is something like this:

So, in black would be my header image (the white part is transparent), in gray I have my menu-bar and in red my first section on content’s site.

My problem is… how can I set (with css/bootstrap) to the image header be like this? What’s the basic structure for that?

My header.php code is this:

?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="">

    <!-- jQuery library -->
    <script src=""></script>

    <!-- Latest compiled JavaScript -->
    <script src=""></script>

    <?php wp_head(); ?>

<body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
        <header id="masthead" class="site-header" role="banner">
            <div class="header">
                <?php echo '<img class="img-responsive" src="' . get_stylesheet_directory_uri() . '/img/header.png">';?>

            <nav class="navbar navbar-default">
              <div class="container-fluid">
                <div class="navbar-header">

                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Page 1</a></li>
                  <li><a href="#">Page 2</a></li>
                  <li><a href="#">Page 3</a></li>

    </header><!-- #masthead -->

    <div id="main" class="site-main">

Read more here: How to put an image header over menu and section?

Leave a Reply

Your email address will not be published. Required fields are marked *