White space around Header on Arcgis hub

[GD2]

Hi everybody, I am having the issue of white space above the Header. Header is customized as below:- any suggestion is highly appreciated :-

<nav class="navbar navbar-default navbar-static-top first-tier">
<div class="container">
<ul style="padding: 30px 0 0 0;" class="nav nav-pills pull-right" role="navigation">
<li><a href="https://" "/search?collection=Dataset">Data</a></li>
<li><a href="https://" "/search?tags=Pdf">Documents</a></li>
<li><a href="https://" "/MapAndAppGallery/index.html?appid=7b9a21a3e33e45a3abcf6ebc694aa...">Map & Apps</a></li>
</ul>
<div class="navbar-brand">
<div class="site-logo">
<img src="https://" "/content/items/28daf41d36b84a9a93d567f9267665ea/data" alt="">

</div>
</div>
</div>
</nav>

[dgiersz_cuyahoga · Accepted solution]

That white space with the search icon?  That's the Global Navigation bar.  Turn it off under Site>Settings>Interactions

[GD2]

@dgiersz_cuyahoga Awesome, that worked perfectly, thanks alot. I am now having the issue with Mobile view on my header as well as footer. They are overlapping with each other. Please see the attached image. Any idea to solve this?

[dgiersz_cuyahoga]

You can try adding classes to the "site-logo" to hide it on small screens.

Options based on screen size:

https://getbootstrap.com/docs/3.4/css/#responsive-utilities

[GD2]

@dgiersz_cuyahoga  Thank you again. I added new classes (with style as display: none) as follows but with no luck. I am very new with Bootstrap in html, could you please point out where and what am I missing to remove the logo on mobile view? Thank you so much!

<nav class="navbar navbar-default navbar-static-top first-tier">
<div class="container">
<ul style="padding: 30px 0 0 0;" class="nav nav-pills pull-right" role="navigation">
<li><a href="https://search?collection=Dataset">Data</a></li>
<li><a href="https://search?tags=Pdf">Documents</a></li>
<li><a href="https:///apps/MapAndAppGallery/index.html?appid=7b9a21a3e33e45a3abcf6ebc694aabea">Map & Apps</a></li>
</ul>
<div class="navbar-brand">
<div class="site-logo">
<div style="display:none;" class=".visible-md-*">
</div>
<div style="display:none;" class=".visible-sm-*">
</div>
<img src="https:///28daf41d36b84a9a93d567f9267665ea/data" alt="">
</div>

</div>
</div>
</nav>

[dgiersz_cuyahoga · Accepted solution]

A couple things: the <div>'s you set to not display are empty.  Also, you can assign multiple classes to a tag. And finally, I think the .hidden classes are to hide things instead of setting the .visible to not display.

I am not a bootstrap or HTML expert, but give this a try:

<nav class="navbar navbar-default navbar-static-top first-tier">
<div class="container">
<ul style="padding: 30px 0 0 0;" class="nav nav-pills pull-right" role="navigation">
<li><a href="https://data-airdrie.opendata.arcgis.com/search?collection=Dataset">Data</a></li>
<li><a href="https://data-airdrie.opendata.arcgis.com/search?tags=Pdf">Documents</a></li>
<li><a href="https://airdrie.maps.arcgis.com/apps/MapAndAppGallery/index.html?appid=7b9a21a3e33e45a3abcf6ebc694aa...">Map & Apps</a></li>
</ul>
<div class="navbar-brand">
<div class="site-logo hidden-xs hidden-sm">
<img src="https://airdrie.maps.arcgis.com/sharing/rest/content/items/28daf41d36b84a9a93d567f9267665ea/data" alt="" >
</div>

</div>
</div>
</nav>

[GD2]

@dgiersz_cuyahoga This worked perfectly. Thank you so much for your comments and an additional class. Very much appreciated !