Header design 2

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) First level navigation - Text (font color, font size, background)

6) First level navigation - Hover (font color, background)

7) First level navigation - Active link (font color, background)

8) Second level navigation - Text (font color, font size, background)

9) Second level navigation - Hover (font color, background)

10) Second level navigation - Active links (font color, background)

11) Language dropdown background (background color)

12) Language dropdown (Font color, font size)

13) Language dropdown arrows (arrow color)

/* HEADER DESIGN SKIN 2 */

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

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

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

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

/* Navigation First Level */

/* 5) Size and Color */
.nav-primary ul li a{
    font-size: 17px;
    color: #fff;
    background: #313c44;
}

/* 6) On Hover */
.nav-primary ul li a:hover{
    color: #ffcf42;
    background: #975757;
}

/* 7) Active links */
.nav-primary ul li.active > a{
    color: #fff;
    background: #975757;
}

/* Navigation Second Level */

/* 8) Size and Color */
.nav-primary ul ul li a{
    font-size: 15px;
    color: #fff;
    background: #313c44;
}

/* 9) On Hover */
.nav-primary ul ul li a:hover{
    color: #ffcf42;
    background: #975757;
}

/* 10) Active links */
.nav-primary ul ul li.active > a{
    color: #fff;
    background: #975757;
}

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

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

/* 13) 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 - First Level - Background color (background color)

5) Side Menu - First Level - Background color on hover (background color)

6) Side Menu - First Level - Background color of active links (background color)

7) Side Menu - Second Level (font color)

8) Side Menu - Second Level - Hover (font color)

9) Side Menu - Second Level - Active (font color)

10) Side Menu - Second Level - Background color (background color)

11) Side Menu - Second Level - Background color on hover (background color)

12) Side Menu - Second Level - Background color of active links (background color)

/* SIDE MENU LINKS */

/* 1) Side Menu - First Level */
.nav-secondary ul li a{
    font-size: 20px;
    color: #fff;
}

/* 2) Side Menu - First Level - Hover */
.nav-secondary ul li a:hover{
    color: #fff;
}

/* 3) Side Menu - First Level - Active */
.nav-secondary ul .active > a{
    color: #fff;
}

/* 4) Side Menu - First Level - Background color */
.nav-secondary ul li a{
    background: #2ecc71;
}

/* 5) Side Menu - First Level - Background color on hover */
.nav-secondary ul li a:hover{
    background: #149e4f;
}

/* 6) Side Menu - First Level - Background color of active links */
.nav-secondary ul .active > a{
    background: #4573b2;
}


/* 7) Side Menu - Second Level */
.nav-secondary ul ul li a{
    font-size: 20px;
    color: #fff;
}

/* 8) Side Menu - Second Level - Hover */
.nav-secondary ul ul li a:hover{
    color: #fff;
}

/* 9) Side Menu - Second Level - Active */
.nav-secondary ul ul .active > a{
    color: #fff;
}

/* 10) Side Menu - Second Level - Background color */
.nav-secondary ul ul li a{
    background: #2ecc71;
}

/* 11) Side Menu - Second Level - Background color on hover */
.nav-secondary ul ul li a:hover{
    background: #149e4f;
}

/* 12) Side Menu - Second Level - Background color of active links */
.nav-secondary ul ul .active > a{
    background: #4573b2;
}
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