Custom Header and Footer Rendering Under Sidebar

[jlaura]

My organization requires a custom header and footer for all of our branding. I quite like the Hugo learn theme, so I am attempting to merge the two.

In the screen shot above, you can see the header is rendering under the sidebar. This is occurring when I place the required header material into the custom-header.html partial. The custom header, added just prior to the tag, is:

<!-- BEGIN USGS Applications Header Template -->
<header id="navbar" class="header-nav"  role="banner">
<div class="tmp-container">
    <!-- primary navigation bar -->
        <!-- search bar-->
    <div class="header-search">
        <a class="logo-header" href="https://www.usgs.gov/" title="Home">
        <img class="img"  src={{"images/logo.png" | relURL}}  alt="Home" />
        </a>
        <form action="https://www.usgs.gov/science-explorer-results" method="GET" id="search-box">
        <div class="fa-wrapper"><label for="se_search" class="only">Search</label>
        <input id="se_search" type="search" name="es" placeholder="Search">
        <button class="fa fa-search" type="submit">
            <span class="only">Search</span>
            </button></div>
        </form>
    </div>
    <!-- end search bar-->
    </div> 
    <!-- end header-container-->

I suspect that this has to do with the position properties on the sidebar and possible how they are interacting with the CSS required by the header. Those css files are loading properly from common.css and custom.css that I have added into the /static directory.

Am I improperly making use of the custom-header.html partial or is this an issue where the CSS required by the header is conflicting with the CSS defined by the project?

[QuLogic]

The custom header and footer are outside the #body div that is the regular content. I had to copy the left margins from here:

hugo-theme-learn/static/css/theme.css

Lines 324 to 328 in e817f53

	#body {
	position: relative;
	margin-left: 300px;
	min-height: 100%;
	}

hugo-theme-learn/static/css/theme.css

Lines 1018 to 1055 in e817f53

	@media only all and (max-width: 59.938em) {
	#sidebar {
	width: 230px;
	}
	#body {
	margin-left: 230px;
	}
	}
	@media only all and (max-width: 47.938em) {
	#sidebar {
	width: 230px;
	left: -230px;
	}
	#body {
	margin-left: 0;
	width: 100%;
	}
	.sidebar-hidden {
	overflow: hidden;
	}
	.sidebar-hidden #sidebar {
	left: 0;
	}
	.sidebar-hidden #body {
	margin-left: 230px;
	overflow: hidden;
	}
	.sidebar-hidden #overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	}
	}

on to the footer div that I had in order to get it placed properly.