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>
#CLE #sloth