Help with styling Header-navbar

Anonymous User · ‎05-01-2018

Hi,

Hoping someone here can take a look and tell me where I'm going wrong. I've either missed something simple or I'm fighting the core CSS of the OpenData framework and can't override it. Any thoughts?

The following fiddle essentially creates what I want. The CSS lives in the header CSS section of the site.

Bootstrap 3 Template - JSFiddle

The 2 problems.

My navbar-right button. In a smaller form factor, the open data site pushes it to the right. The fiddle simply centers it. I'm trying to make it a left side simple button. This seems to be trumping my attempts to keep it on the left during small mode: navbar-right:right!important

The other problem is my logo. There is 17.5px of padding applied to it, thus its been moved down. I can put the following into the Header HTML box to regain the room I need. It introduces a shift on the whole header. I get a white bar across the top of the page because that padding is apparently needed. Changing the padding on the navbar-brand seems to be the only place I can get my image to show as I need.

thanks for any insight,

Kevin

Anonymous User · ‎05-03-2018

We were able to overcome the white bar at the top by adding in:

body.calcite.ember-application {

margin-top: -10px;

}

I've been using a lot of inline styling in order to adjust items on the web page the way I want. I was finding that the header CSS wasn't always doing what I expected.

I'm not sure if this is what you mean but this worked for me

<style>
.navbar-default {
    display: none; 
}
body.calcite.ember-application {
   margin-top: -10px;
}
.navbar-brand{
padding-top:5px;
padding-bottom:5px;
}
.nav {
padding-top:20px;
}
@media (min-width: 768px) { 
.shift-right{
float:right !important;
}
}
</style>
<div class="custom-header">
     <div class="markdown-card ember-view" id="ember483">
          <nav class="navbar navbar-inverse navbar-static-top first-tier">
               <div class="container">
                    <div class="navbar-header">
                         <button class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"><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="bs-example-navbar-collapse-1">
                         <a class="navbar-brand" href="http://opendata.arcgis.com/"><img alt="City of Ottawa Logo" src="https://maps.ottawa.ca/od_images/Ottawa.png"></a>
                         <ul class="nav navbar-nav">
                              <li>
                                   <a href="#">Home</a>
                              </li>
                              <li>
                                   <a href="#">Apps</a>
                              </li>
                              <li>
                                   <a href="#">Data</a>
                              </li>
                              <li>
                                   <a href="#">Stories</a>
                              </li>
                              <li>
                                   <a href="#">Feedback</a>
                              </li>
                         </ul>
                         <ul class="nav navbar-nav shift-right">
                              <li>
                                   <a class="btn btn-primary" href="#">FR</a>
                              </li>
                         </ul>
                    </div>
               </div>
          </nav>
     </div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Anonymous User · ‎05-15-2018

Thanks, Joel - this is good info. I appreciate it!

KlaraSchmitt · ‎05-17-2018

I'm afraid I may not have very good advice as I'm a little vague about the end-goal, but if your wish is to have the burger menu appear on the left, you'll want to create a unique class on the navigation root element and that'll help you float the menu to the left. If your goal is to have a single button outside the menu and always on the right, I would use the .pull-right class rather than .navbar-right as there's some extra styling attached to .navbar-right because we need it a little different. You'll want to move your "FR" button to the top of the nav container, so that it has some static content to float around and into the correct position, and to avoid having it part of the collapsable menu.

Per your logo, if you use a custom-class you can remove the padding that gets generated by the navbar-brand class.

I, unfortunately, was not able to remedy the burger menu being flush left with the edge of the screen since it has something to do with the negative margins in navbar-header, but I couldn't find the appropriate set of selectors that would cause an override. You may need to experiment a bit more.

Finally, I added a clearfix class in an empty div at the bottom to make sure none of these floats caused any other mischief.

CSS

.left-menu .navbar-toggle {float: left; background-color: #101012;}
.left-menu .navbar-brand {height: 70px; padding: 5px 0px;}‍‍

HTML

<nav class="left-menu navbar navbar-default">
    <ul class="nav nav-navbar pull-right">
      <li>
        <a href="#" class="btn btn-primary" style="margin-top: 5px; margin-right: 5px;">FR</a>
      </li>
    </ul>

  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
     <a href="http://opendata.arcgis.com/" class="navbar-brand">
       <img src="https://maps.ottawa.ca/od_images/Ottawa.png" alt="City of Ottawa Logo"> 
     </a> 
    </div><!-- /.navbar-header -->

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Apps</a></li>
        <li><a href="#">Data</a></li>
     <li><a href="#">Stories</a></li>
     <li><a href="#">Feedback</a></li>
      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
<div class="clearfix"></div>
</nav>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍