Hub Site Custom Header - burger menu button

ChrisMalam

Hi all,

I have been working on a custom site header for an ArcGIS Hub site and have been encountering some issues around formatting a drop-down burger menu option for mobile users. Other posts in this community have been a great starting point for my code (e.g. Hub Site Custom Header), but going for a slightly different look.

What I am trying to achieve is a burger menu button that extends to full screen width, and includes the word "Menu" next to the icon bars (an example is shown below). Instead, the burger menu currently appears as a small button on the right.

Here is the code I am using:

HTML

<nav class="navbar navbar-default visible-xs">

<div class="container-fluid">
<div class="navbar-header" style="color: #fff; background: #313131">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<b>Menu</b>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="cemp-menu-list"><a href="#"><b>Home</b></a></li>
<li class="cemp-menu-list"><a href="#"><b>Ecosystem Summary</b></a></li>
<li class="cemp-menu-list"><a href="#"><b>Approach</b></a></li>
<li class="nav-item dropdown cemp-menu-list">
<a class="dropdown-toggle" data-toggle="dropdown" role="button"><b>Condition Assessment <span class="caret"></span></b></a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li><a href="#">Overview</a></li>
<li class="divider" style="color: #313131"></li>
<li><a href="#">Condition assessments</a></li>
<li class="divider" style="color: #313131"></li>
<li><a href="#">Recommendations</a></li>
</ul>
</li>
<li class="cemp-menu-list"><a href="#"><b>Data repository</b></a></li>
</ul>
</div>
</div>

</nav>

CSS

.cemp-menu-list {
background: #fff;
border-bottom: 1px solid #c1c1c1;
}

.navbar-default .navbar-toggle{
background: #313131;
color: #fff !important;
border-color: #313131;
}

.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}

.navbar-default .navbar-toggle:focus{
background-color: #313131;
}

.navbar-default .navbar-toggle:hover{
background-color: #6f6f6f;
}

Any help would be much appreciated. Thanks!

 

 

MMackey

Hi Chris, 

Try making the navbar-toggle button's width equal to100%. That way the entire width of the navigation bar will be clickable. 

 

.navbar-toggle{width:100%;}

 

 

I've been working on custom navigation bars in ArcGIS Hub and found that the navbar-toggle class automatically detects screen size and places the menu button within the navbar depending on where it's located in your code. 

"Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler."

Bootstrap Navbar Toggler

I've also made a storymap called Next Level Navigation to help digest custom navigation bars in ArcGIS Hub using HTML, CSS and Bootstrap. Feel free to check out my code examples for more context.

I hope this helps,

Madison