Return to previous page

Header Split in 2 Colors - by luxecreative

This topic has 5 replies, 3 voices, and was last updated 9 years ago ago by Eva Kemp

luxecreative

Participant

April 23, 2015 at 22:57

Hi how do I modify header background colour to be blue (current) but with also a thin yellow line horizontal across the header bottom?

Currently this is my Custom CSS file:

.header-type-3 .logo-with-menu img {
width: 400px !important;
}
.header-type-3 .main-nav .menu {
width: 670px !important;
}

.header-type-3 {background-color:#002143;}

*{
border:none;
box-shadow:none !important;
}

.main-nav .menu > li > a:hover {
color: #FFDB00!important;
}

.main-nav .menu > li > a {
color: white!important;
}

#59324 Copied

4 Answers

Brian Johnson

Member

April 24, 2015 at 08:52

Hello

You may add this code into the custom.css to display line:
.main-nav{ border-bottom: 2px solid yellow;

With best regards
Brian Johnson

#59378 Copied
Eva Kemp

Support staff

April 24, 2015 at 08:53
Hello,

As I see the header already has blue background. To add yellow line use this code in custom.css file:
```
.header-type-3 {
 border-bottom: 2px solid yellow;
}
```
Thank you.
Regards,
Eva Kemp.
#59379 Copied
luxecreative

Participant

April 27, 2015 at 18:11

Ok thank you for your help! It worked. Now just wondering if I can move the yellow line higher like shown here? https://dl.dropboxusercontent.com/u/1762752/unnamedCAWC61NG.jpg

#60047 Copied
Eva Kemp

Support staff

April 27, 2015 at 18:59
Hello,

In this case remove the previous code and add this one:
```
.header-type-3 .main-nav .double-border {
    border-bottom: 4px solid yellow !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
}
```
Regards,
Eva Kemp.
#60073 Copied
Viewing 5 results - 1 through 5 (of 5 total)