Header design 6

This section contains CSS snippets that control the look of the "header" element on a D4 design.

Use all of the code or choose the specific parts of the code you need.

Troubleshooting tip: If you experience issues with the snippets - check the hierarchy of your adjustments. CSS is reading from the top, and overwrites everything with same targets when reading them later on.

Desktop header


With this snippet, you can change the look of your header design. You are able to change the following items:

1) Left header (font color, font size)

2) Left tagline (font color, font size)

3) Right header (font color, font size)

4) Right tagline (font color, font size)

5) Top area background (background color)

6) First level navigation background (background color)

7) First level navigation - Text (font color, font size)

8) First level navigation - Text hover (font color)

9) First level navigation - Active link (font color)

10) First level navigation - Left and right border colors (border colors)

11) Second level navigation - Background (background color)

12) Second level navigation - Text (font color, font size)

13) Second level navigation - Text hover (font color)

14) Second level navigation - Active links (font color)

15) Second level navigation - Left border color (border color)

16) Language dropdown background (background color)

17) Language dropdown (Font color, font size)

18) Language dropdown arrows (arrow color)

/* HEADER DESIGN SKIN 6 */

/* 1) Left Header */
.header #companyName{
    font-size: 20px;
    color: #fff;
}

/* 2) Left Tagline */
.header #companyTagline{
    font-size: 12px;
    color: #9b5c5c;
}

/* 3) Right Header */
.header #phoneNumber{
    font-size: 22px;
    color: #fff;
}

/* 4) Right Tagline */
.header #actionLine{
    font-size: 15px;
    color: #9b5c5c;
}

/* 5) Top Area Background */
.header .header-container{
    background: #363f48;
}

/* Navigation First Level */

/* 6) Background */
.header .nav-primary{
    background: #9b5c5c;
}

/* 7) Size and Color */
.nav-primary ul li a{
    font-size: 20px;
    color: #fff;
}

/* 8) On Hover */
.nav-primary ul li a:hover{
    color: #e1ae5f;
    border-bottom-color: #e1ae5f;
}

/* 9) Active links */
.nav-primary ul li.active > a{
    color: #e1ae5f;
    border-bottom-color: #e1ae5f;
}

/* 10) Left and Right Border Colors */

.nav-primary ul li,
.nav-primary ul li:last-child{
    border-left-color: #7b4343;
    border-right-color: #7b4343;
}

/* Navigation Second Level */

/* 11) Background */
.header .nav-primary > ul ul,
.header .nav-primary > ul ul:before,
.header .nav-primary > ul ul:after{
    background: #363f48;
}

/* 12) Size and Color */
.nav-primary ul ul li a{
    font-size: 20px;
    color: #fff;
}

/* 13) On Hover */
.nav-primary ul ul li a:hover{
    color: #e1ae5f;
    border-bottom-color: #e1ae5f;
}

 /* 14) Active links */
.nav-primary ul ul li.active > a{
    color: #e1ae5f;
    border-bottom-color: #fff;
}

/* 15) Left Border Color */
.nav-primary ul ul li:first-child{
    border-left-color: #7b4343;
}

/* 16) Language Dropdown background */
.no-touch .nav-language ul:last-child{
    background: #9b5c5c;
}

/* 17) Language Dropdown text */
.no-touch .nav-language ul:last-child li,
.no-touch .nav-language ul:last-child  a{
    color: #fff;
    font-size: 15px;
}

/* 18) Language Dropdown Arrow color */
.no-touch .nav-language .btn-language:before{
    color: #fff;
}
Copy to clipboard

Desktop side menu


With the 'Desktop side menu' snippet, you can change the looks of your side menu. You are able to change the following items:

1) Side menu - First level (font color, font size)

2) Side menu - First level - Hover (font color)

3) Side menu - First level - Active (font color)

4) Side menu - Second level (font color, font size)

5) Side menu - Second level - Hover (font color)

6) Side menu - Second level - Active (font color)

/* SIDE MENU LINKS */

/* 1) Side menu - First level */
.nav-secondary ul li a{
    font-size: 20px;
    color: #4573b2;
}

/* 2) Side menu - Second level - Hover */
.nav-secondary ul li a:hover{
    color: #2ecc71;
}

/* 3) Side menu - Second level - Active */
.nav-secondary ul .active > a{
    color: #ee6457;
}

/* 4) Side menu - Second level */
.nav-secondary ul ul li a{
    font-size: 20px;
    color: #4573b2;
}

/* 5) Side menu - Second level - Hover */
.nav-secondary ul ul li a:hover{
    color: #2ecc71;
}

/* 6) Side menu - Second level - Actuve */
.nav-secondary ul ul .active > a{
    color: #ee6457;
}
Copy to clipboard

Mobile header


This is the snippet to change the looks of the mobile header and menu section. You are able to change the following items:

1) Header background (background color)

2) Header title (font color, font size, line height)

3) Menu icon (font color)

4) Language icon (font color)

5) Primary navigation background (background color)

6) Border between links (background color)

7) Links in dropdown (font size, font color, background color)

8) Arrows in dropdown (font color)

9) Links in dropdown - active (font color, background color)

10) Arrows in dropdown - Active (font color)

/* Mobile header */
@media only screen and (max-width: 671px) {

/* 1) Mobile Header Background */
#identityWrapper{
    background: #073e54;
}

/* 2) Mobile Header Title */
.header-content .header-title.hidden-large span{
    font-size: 20px;
    color: #fff !important;
    line-height: 1;
}

/* 3) Menu Icon Color */
.header-content #menubutton:before{
    color: #1e6885;
}

/* 4) Language Icon Color */
.header-content .btn-language:before{
    color: #1e6885;
}

/* 5) Mobile Nav Primary Background */
.nav-primary{
    background-color: #053041;
}

/* 6) Mobile Nav Dropdown Border color between links */
.nav-dropdown{
    background: #0c4a63;
}

/* 7) Mobile Nav Dropdown links
   Mobile Language Dropdown links */
.nav-dropdown li a,
.nav-dropdown li a:hover{
    font-size: 18px;
    color: #fff !important;
    background-color: #1c5e78 !important;
}

/* 8) Mobile Nav Dropdown link arrow */
.nav-dropdown li a .arrow{
    color: #fff;
}

/* 9) Mobile Nav Dropdown active links */
.nav-dropdown li a.active{
    color: #fff !important;
    background-color: #277797 !important;
}

/* 10) Mobile Nav Dropdown active links arrow */
.nav-dropdown li a.active > .arrow{
    color: #fff;
}
}
Copy to clipboard