Hub Site Custom Header

[NataliyaLys]

I am working on the Hub Site, in AGO and would like to create a custom header for my site. While what I got so far looks ok. There are a couple things I am struggling with. First it looks like there are two tiers in the header, and I would like the padding between to tiers to be smaller. My over all goal is to make the header section smaller. But I cannot figure out how to accomplish that. Second, if I resize my screen or pull up this site on the mobile device, the header doesn't have a true responsive mode, and the items from the header start running into each other, and behave chaotically. 

Below is a link to my site, as well as the html and css for the header. 

https://dchd-air-quality-dogis.opendata.arcgis.com

Any help would be greatly appreciated.

HTML

<nav class="navbar navbar-default navbar-static-top first-tier">
<div class="container">
<ul class="nav nav-pills pull-right" role="list">
<li><a href="https://www.douglascounty-ne.gov/" target="_blank">Douglas County</a></li>
<li><a href="https://www.douglascountyhealth.com/" target="_blank">DC Health Department</a></li>
<li><a href="https://www.cityofomaha.org/" target="_blank">City of Omaha</a></li>
<li><a href="https://gis.douglascounty-ne.gov/contact-us" target="_blank">Feedback</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-static-top second-tier" role="navigation">
<div class="container">
<img class = "text pull-left" src="https://s3.amazonaws.com/dcgis_photos/Air_Quality_Monitors/Web-DCHD-Logo-Tagline-Type_Color.png" alt="logo" width="25%" height="15%">
<div class = "text pull-left"> <h1 style="text-align: left;"><strong>Air Quality Monitoring</strong></h1><p style="text-align: left; "></p><h4 style="text-align: left;">Douglas County Health Department</h4><p></p>

<br>
<div class="btn-group">
<a button="" class="btn btn-default" type="button" id="dropdownMenu1" aria-haspopup="true" aria-expanded="false" href="https://dchd-air-quality-dogis.opendata.arcgis.com">Home</a>

</div>
<div class="btn-group">
<a button="" class="btn btn-default" type="button" id="dropdownMenu2" aria-haspopup="true" aria-expanded="false" href="https://dogis.maps.arcgis.com/apps/opsdashboard/index.html#/8725293d42fa4bcb8887f9e74ff46458" target="_blank">Interactive Map</a>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pollutants
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/carbon-monoxide" target="_blank">Carbone Monoxide</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/nitrogen-oxides" target="_blank">Nitrogen Oxides</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/ozone" target="_blank">Ozone</a></li>
<li><a href=" https://dchd-air-quality-dogis.opendata.arcgis.com/pages/sulfur-dioxides" target="_blank">Sulfur Dioxides</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/particulate-matter" target="_blank">Particulate Matter</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/lead" target="_blank">Lead</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Other Pollutants</a></li>
</ul>
</div>
<div class="btn-group">
<a button="" class="btn btn-default" type="button" id="dropdownMenu2" aria-haspopup="true" aria-expanded="false" href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/pollen" target="_blank">Pollen</a>

</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Monitoring Sites
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/site-bellevue" target="_blank">Bellevue</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/site-blair" target="_blank">Blair</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/site-creighton-no-downtown" target="_blank">Creighton/North Omaha Downtown</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/site-central" target="_blank">Central Omaha</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/site-ncore" target="_blank">NCORE (Health Dept Campus)</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/site-ne-omaha1" target="_blank">Northeast Omaha 1</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/site-ne-omaha2" target="_blank">Northeast Omaha 2</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/site-ralston" target="_blank">Ralston</a></li>
<li><a href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/site-south-omaha" target="_blank">South Omaha</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Links
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#EPA">EPA</a></li>
<li><a href="#NOAA" target="_blank">NOAA</a></li>
<li><a href="#AirVision" target="_blank">AirVision</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Other Documents</a></li>
</ul>
</div>
<div class="btn-group">
<a button="" class="btn btn-default" type="button" id="dropdownMenu2" aria-haspopup="true" aria-expanded="false" href="https://dchd-air-quality-dogis.opendata.arcgis.com/pages/about-air-quality-dchd" target="_blank">About</a>
</div>
</div>
</div>
<br>
</nav>

CSS

.first-tier {
height: 0px;
margin-bottom: 0px;
background-color: #ffffff;
}

.first-tier .nav>li>a {
margin-top: 5px;
padding: 3px 6px;
color: #5974ba;
}

.first-tier .nav>li>a:focus,
.first-tier .nav>li>a:hover {
background-color: #136fbf;
color: #5974ba;
}

.first-tier .site-logo img {
vertical-align: middle;
}

.first-tier h1 {
display: inline;
font-size: 25px;
}

.second-tier {
margin-bottom: 0px;
background-color: #fff;
color: #5974ba;
}

.site-header .navbar-header img {
vertical-align: middle;
height: 50px;
padding: 5px;
}

.header-container {
top: 80px;
margin: 0 auto;
max-width: 1440px;
position: absolute;
width: 100%;
transform: translateX(-50%);
left: 50%;
z-index: 10;
transition: max-width 250ms linear;
}

.header-container .navbar .container-fluid {
display: flex;
}

.header-container .navbar.navbar-default {
background-color: #fff;
border-color: transparent !important;
border-radius: 0;
}

.header-container .navbar.navbar-default .navbar-collapse.collapse {
display: flex !important;
flex: 1;
padding-right: 0;
}

.header-container .navbar.navbar-default .navbar-brand {
color: #333;
height: auto;
padding: 1rem;
}

.header-container .navbar.navbar-default .navbar-brand-img {
display: inline-block;
}

.header-container .navbar.navbar-default .navbar-nav {
flex: 2;
align-items: center;
justify-content: center;
margin: auto;
float: none;
}

.header-container .navbar.navbar-default .navbar-nav>li {
float: none;
display: inline-block;
}

.header-container .navbar.navbar-default .navbar-nav>li>a {
background: transparent;
color: #333;
font-size: 15px;
transition: all 250ms linear;
}

.header-container .navbar.navbar-default .navbar-nav>li>a:focus,
.header-container .navbar.navbar-default .navbar-nav>li>a:hover {
background: #3276AE;
color: #fff;
}

.header-container .navbar.navbar-default .navbar-right {
margin-right: 0;
flex: 1;
text-align: right;
}

.is-sticky {
position: relative;
z-index: 10;
}

.is-sticky .header-container {
max-width: 100%;
}

@media screen and (max-width: 768px) {
.header-container .navbar-header {
width: 100%;
}
.header-container .navbar-default .navbar-toggle {
margin-top: 18px;
}
.header-container .navbar .container-fluid {
display: block !important;
}
.header-container .navbar.navbar-default .navbar-collapse.collapse {
overflow: hidden;
display: none !important;
}
.header-container .navbar.navbar-default .navbar-collapse.collapse.in {
display: block !important;
}
.header-container .navbar.navbar-default .navbar-nav {
display: inherit;
padding: 0 0 1rem 0;
}
.header-container .navbar.navbar-default .navbar-nav > li {
display: block;
}
}

/* Editor adjustment for absolute positioned header */
header ~ .body-editor section:first-child { padding-top: 100px;}

[ValerieDesrosier]

Hi imtigis,

I am running into the opposite issue, where my top login bar is hidden, but I would like it visible. Were you able to find a solution?