Select to view content in your preferred language

Custom Header Disappears in Mobile

512
0
10-24-2023 08:00 PM
VanessaPocock
New Contributor III

Hi all,

I'm working on a custom header and I have two questions.

1. Could anyone assist in helping me figure out why the menu in the second tier disappears when previewing the mobile view

2. Could anyone assist me in figuring out how to reduce the height of the first tier of the header so its roughly the size of my the "Open Data" text

Screenshots of issue #1 and HTML code below. Not using any custom CSS at the moment, but assuming that I might need to, to solve these problems.



<nav class="navbar navbar-default navbar-static-top first-tier" style="background-color:#007797;">
<div class="container">
<ul class="nav nav-pills pull-right" role="navigation">
</ul>
<div class="navbar-brand">
<div class="site-logo">
<a href="https://opendata-strathconacounty.hub.arcgis.com/"><img src="https://strathconacounty.maps.arcgis.com/sharing/rest/content/items/d58bb75dfaad49748a3f1e68a9c573f2..." alt="strathcona" style="width: 180px; height: 28px; padding-right: 10px"></a>
<a href="https://opendata-strathconacounty.hub.arcgis.com/" style="text-decoration: none;"><span style="font-size:24px; color: #ffffff;">Open Data</span></a>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-static-top second-tier" role="navigation" style="background-color:#006a86;">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="container">
<div class="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="https://opendata-strathconacounty.hub.arcgis.com/explore">Data</a></li>
<li><a href="https://opendata-strathconacounty.hub.arcgis.com/pages/imagery">Imagery</a></li>
<li><a href="https://opendata-strathconacounty.hub.arcgis.com/pages/web-apps">Web Apps</a></li>
<li><a href="https://opendata-strathconacounty.hub.arcgis.com/pages/about">About</a></li>
<li><a href="https://opendata-strathconacounty.hub.arcgis.com/pages/help">Help</a></li>
</ul>
</div>
</div>
</div>
</nav>

0 Kudos
0 Replies