The Banner holds all the elements in the theme’s header. This section is is the first thing users see when they visit your site.
-
Add the following code to
custom.css
below the Banner placeholder:#banner { background-color: $bkColor; #heading { padding: 0 4%; .site-title { .logo { padding-bottom: 16px; } } .page-title { color: $themeMainColor; font-style: oblique; text-transform: uppercase; } } /* ---------- Main Navigation ---------- */ #navigation { background-color: $themeMainColor; display: block; position: relative; z-index: 1; .active{ background-color: #00C4FF; > a { color: #FFF; } } .dropdown-menu li { background: #00ACFF; border-width: 0; margin: 0; position: relative; &:after, &:before { border-width: 0; } a { color: #FFF; &:hover { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; } } } li { margin: 0 4px; padding: 15px 10px; position: absolute; &:hover { background-color: #00C4FF; .child-menu { display: block; margin-top: 0; } a { color: #FFF; text-decoration: none; } } } ul { li { &:hover { background-color:#00C4FF; .child-menu { display: block; padding: 0; li { background-color: $themeMainColor; &:hover { background-color: #00C4FB; } } a { color: #FFF; margin: -10px; text-decoration: none; } } } } } > ul > li { display: inline-block; font-size: 1.2em; position: relative; a { color: #FFF; padding: 15px 10px; } } } }
The navigation has been formatted in a list and spaced further down from the
logo. It has also been placed in a red bar to match the color of the logo. To
further relate the navigation’s color to the rest of the theme, the navigation
items have been given a blue background when active and on hover. At the moment,
the links in the Activities
drop-down are hidden by the carousel. This will be
fixed in the next section. Your theme should now look like the following figure:
Figure 1: The updated navigation bar brings the banner together and completes the header.
The Banner is now styled! You can move on to the Content <div>
styling next.