Custom Header for Enterprise Site: Calcite Bootstrap

426
4
Jump to solution
07-14-2021 02:18 PM
ElahaAkrami
New Contributor II

I've created a custom header for an Enterprise Site using the Calcite Bootstrap sample code. I've made some minor inline CSS changes, like floating the menu items to the right, but overall I am relying on the header to pick up CSS from the rest of the site (see below for full HTML).  This works well for the most part, but there are two issues:

  • For menu dropdowns, the header seems to be picking up the 'Body Link Color' set in the Theme settings, instead of using the 'Header Text Color'. Note that there is no option to set a header link color. This is causing usability issues because the header background is darker than the body background, making the links hard to read - see 'Categories' below:

ElahaAkrami_0-1626296650212.png 

I've tried applying some custom CSS classes (see below) in multiple places to address this, but haven't been successful.

.navbar a,
.navbar a:hover,
.navbar a:focus,
.navbar a:active { color: #F1F7ED; }

 

  • When opening apps from the site, the custom header blocks content at the top portion of the screen. In the example below, I've added blank space to the top of the app to account for the header, but you can see the issue where the scroll bar is cut off:

 ElahaAkrami_1-1626297263212.png

 

Header HTML:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="width:100%;">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Title</a>
</div>
<div class="navbar-collapse collapse" id="navbar" style="float:right;">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Categories <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">[Coming Soon]</a>
</li>
<li>
<a href="#">[Coming Soon]</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Other Resources <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="divider" role="separator"></li>
<li class="dropdown-header">Internal Resources</li>
<li>
<a href="#">[Coming Soon]</a>
</li>
<li>
<a href="#">[Coming Soon]</a>
</li>
<li>
<a href="#">[Coming Soon]</a>
</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">External Resources</li>
<li>
<a href="#">Example</a>
</li>
</ul>
</li>
<li>
<a href="#">Help</a>
</li>
</ul>
</div>
</div>
</nav>

 

0 Kudos
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Contributor

Hi Elaha, 

While I don't typically recommend this because it's the nuclear option and can cause mayhem if you use too many of them, you might trying appending !important to the end of your CSS for the color attribute.

.site-header .navbar-default .navbar-nav > li > a {
background-color: #243e36;
color: #f1f7ed !important;
}

 

View solution in original post

0 Kudos
4 Replies
KlaraSchmitt
Esri Contributor

Hi Elaha,

The theme builder is actually intended to style the out-of-the-box header options and will not necessary work with the custom-header option as we can't apply our theme variables to custom code on the fly. It may be that your custom CSS selectors are too general. We use .navbar multiple places in the app and our compiled theme file is very specific, and with CSS, the more specific you get, the more likely that specificity will win against any generalizations. Try using .site-header .custom-header .navbar-default .navbar-nav > li > a instead of .navbar a and see if that helps.

As for the issue of the navbar overlaying existing content, if you remove the .navbar-fixed-top class from your header, that will go away. Fixed-headers used fixed positioning so that overlays the content.

-Klara

0 Kudos
ElahaAkrami
New Contributor II

Thanks for the quick reply, Klara. Removing the .navbar-fixed-top class from the header resolves the overlay issue - the fixed header was previously hiding the global navigation menu, which was preferred, but that was easily removed by turning off the global navigation option.

As for the link colors in the header, I tried the suggested selectors but didn't see any changes. Since this only happens when the dropdown menu is opened, I investigated with Chrome developer tools and found the following:

ElahaAkrami_0-1626362594365.png

The CSS settings are being overwritten by li.open a. I did try adding li.open to the CSS selectors but that didn't work either. Any ideas what might be happening there?

 

0 Kudos
KlaraSchmitt
Esri Contributor

Hi Elaha, 

While I don't typically recommend this because it's the nuclear option and can cause mayhem if you use too many of them, you might trying appending !important to the end of your CSS for the color attribute.

.site-header .navbar-default .navbar-nav > li > a {
background-color: #243e36;
color: #f1f7ed !important;
}

 

View solution in original post

0 Kudos
ElahaAkrami
New Contributor II

Thanks Klara, appending !important seems to have done the trick. I tried it in multiple places and it worked with a.dropdown-toggle.

 

a.dropdown-toggle{
  color: #f1f7ed !important; 
}

 

0 Kudos