AnsweredAssumed Answered

Help with styling Header-navbar

Question asked by khibmaesri-ca-esridist Employee on May 1, 2018
Latest reply on May 17, 2018 by KSchmitt-esristaff

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.

 

<style>
.navbar-brand{
padding-top:0px;
padding-bottom:5px;
}
</style>

 

thanks for any insight,

Kevin

Outcomes