Latest Contributions by 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;} ... View more