Select to view content in your preferred language

Custom Header Disappears in Mobile

888
1
10-24-2023 08:00 PM
VanessaPocock
Occasional Contributor

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
1 Reply
KaitlynM
Emerging Contributor

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!

0 Kudos