Headers

The Solas UI 'headers' come in various flavous (country, corporate, event, campaign etc) and are made up from a number of components including:

.navbar - Essentially the 'header' container when navbars are used in this context.

.navbar-header - Acts as the wrapper around the brand container.

.navbar-nav's - Usually the navbar will consist of at least one navbar-nav usually the .navbar-nav-primary variation. On mobile it is controlled by a .bc-btn-navbar-group

.navbar-brand - The brand area containing any combination of the following:

.bc-brand-logo
.bc-brand-secondary-logo
.bc-brand-slogan

.bc-navbar-support - A region that houses supporting navbar tasks such as search, account information, language switcher, supporting links:

.navbar-nav - Used for the language switcher and supporting links
.bc-navbar-search - The search form

Browse the examples below to get a proper idea of how to put them togther.

Header examples

All navbars require the base class .navbar

Slim navbar with no navigation

.navbar-slim.

Slim navbar with a long slogan

.navbar-slim, this example uses an extra class on the .slogan to reduce the size on mobile.

Slim navbar with no navigation with a border-bottom

.navbar-slim, this example uses .navbar-with-border to add a subtle border to the bottom of the navbar.

Campaign page navbar

.bc-navbar-default, this campaign page navbar example uses .navbar-with-border to add a subtle border to the bottom of the navbar. Also .navbar-banner class for the top campaign banner.

Slim navbar with navigation and support navbar

.navbar-slim. This example uses:

Primary navigation
Support area - positioned top right on desktop but underneath the primary nav on mobile

If you have a lot of items to go inside of the support navbar and you need more vertical space then consider using the .navbar-default.

Default navbar with all possible children components

.navbar-default, which is massive, the reason it's massive is that it's used on 120+ sites and a lot of these sites are currently content heavy and require a lot more space to overload the support navbar.

Primary navigation
Support area - positioned top right on desktop but underneath the primary nav on mobile
Promo links - to be deprecated

And tacked on to the end of all that, there could also be a need for another navbar attached to that one! ;-) This one is typically used as a microsite navigation, here the .navbar-microsite class name.

These navbars use a title rather than the branch componet but other than have the same structure as a reugular navbar but look a little different.

When using the microsite navbar with default colour scheme (will be black in the next release) you will need to add add a class of .navbar-inverse to the preceding .navbar-default, otherwise they will be the same colour.

This example includes the IELTS colour branding on the IELTS sections of country sites, for testing purpose it has the secondary logo but it should be hidden on IELTS, applied by adding a class of ielts-branding to a wrapping tag such as the <body>.

ORS2 headers include these styles but with the addition of the IELTS logo, we use the slogan element and replace the text with the IELTS logo applied via another additional class of ielts-slogan. Checkout an ORS2 example of this as the ORS2 headers are simplier that the country site headers.