Header design 3A

Note that the desktop header snippet Header 3A is only working with Source and Playfair skins!

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)

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

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

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

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

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

11) Language dropdown background (background color)

12) Language dropdown (Font color, font size)

/* HEADER DESIGN SKIN 3a */

/* 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: #4573b2;
}

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

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

/* Navigation Second Level */

/* 8) Size and Color */
.nav-primary ul ul li a{
    font-size: 16px;
    color: #4573b2;
}

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

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

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

/* 12) Language Dropdown text */
.no-touch .nav-language ul:last-child li,
.no-touch .nav-language ul:last-child  a{
    color: #fff;
    font-size: 15px;
}
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) On Hover */
.nav-secondary ul li a:hover{
    color: #2ecc71;
}

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

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

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

/* 6) Active State */
.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