Custom Header Disappears in Mobile

VanessaPocock — Thu, 26 Oct 2023 02:26:29 GMT

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/data" 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>

Re: Custom Header Disappears in Mobile

KaitlynM — Mon, 07 Apr 2025 16:24:39 GMT

Hi Vanessa,

I know this post is a few years old, but I am having a similar issue with the header in one of my applications. Based on your header here https://opendata-strathconacounty.hub.arcgis.com/ , it looks like you resolved your issue. Could you share how you configured your HTML to achieve this? It looks great on your site!

topic Custom Header Disappears in Mobile in ArcGIS Hub Questions

Custom Header Disappears in Mobile

Re: Custom Header Disappears in Mobile