by
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:
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:
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>
by
