Change colour of header/menu background

[Anonymous]

Hi,

I want to change the header/menu background to black and the menu font to white please. As you can see I have the logo background as black and would like it to blend in as the same colour.

Also, where can I edit the ‘BLOG’ banner? Also seen in the attached photo.

Thanks,
Sally

[admin]

Hi Sally,

CSS of DesignOrbital themes is self explanatory and easy to customize, Let play with your ideas in the style.css file

I have made changes in the style.css for you. Changes are mostly #000 and #fff, you may modify the existing values with the followings in style.css.

I want to change the header/menu background to black

CSS Section:

/**
|

---

| =Header
|

---

*/

#header {
width: 100%;
margin: 0;
background: #000;
border-bottom: solid 2px #fff;
z-index: 100;
}[/CODE]

[B]and the menu font to white please. [/B]

[B][COLOR=#0000ff]CSS Section:[/COLOR][/B]

/**
|————————
| =Menu Primary
|————————
*/

[CODE]/** Top Level Anchors */
.menu ul a,
.menu ul a:visited {
display: block;
font-size: 14px;
line-height: 21px;
padding: 33px 20px;
position: relative;
text-decoration: none;
color: #fff;
}

/** Nested UL */
.menu ul ul.sub-menu {
webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
background: #000;
}

/** Global Anchors Hover */
.menu ul a:focus,
.menu ul a:hover,
.menu ul a:active {
color: #488ac5;
background: #000;
}[/CODE]

[B]Also, where can I edit the ‘BLOG’ banner?[/B]

If you are talking about switch off/on of this BLOG banner, than please follow the simple steps,

Go to: Appearance > Farad Options >Blog Settings

Here, you can control the Sub Heading easily.

If you want to edit the content than locate the following file,

farad/loop-meta.php

Enjoy![CODE]#header {
width: 100%;
margin: 0;
background: #000;
border-bottom: solid 2px #fff;
z-index: 100;
}[/CODE]

and the menu font to white please.

CSS Section:

/**
|

---

| =Menu Primary
|

---

*/

/** Top Level Anchors */
.menu ul a,
.menu ul a:visited {
display: block;
font-size: 14px;
line-height: 21px;
padding: 33px 20px;
position: relative;
text-decoration: none;
color: #fff;
}

/** Nested UL */
.menu ul ul.sub-menu {
webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
background: #000;
}

/** Global Anchors Hover */
.menu ul a:focus,
.menu ul a:hover,
.menu ul a:active {
color: #488ac5;
background: #000;
}[/CODE]

[B]Also, where can I edit the ‘BLOG’ banner?[/B]

If you are talking about switch off/on of this BLOG banner, than please follow the simple steps,

Go to: Appearance > Farad Options >Blog Settings

Here, you can control the Sub Heading easily.

If you want to edit the content than locate the following file,

farad/loop-meta.php

Enjoy![CODE]/** Top Level Anchors */
.menu ul a,
.menu ul a:visited {
display: block;
font-size: 14px;
line-height: 21px;
padding: 33px 20px;
position: relative;
text-decoration: none;
color: #fff;
}

/** Nested UL */
.menu ul ul.sub-menu {
webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
background: #000;
}

/** Global Anchors Hover */
.menu ul a:focus,
.menu ul a:hover,
.menu ul a:active {
color: #488ac5;
background: #000;
}[/CODE]

Also, where can I edit the ‘BLOG’ banner?

If you are talking about switch off/on of this BLOG banner, than please follow the simple steps,

Go to: Appearance > Farad Options >Blog Settings

Here, you can control the Sub Heading easily.

If you want to edit the content than locate the following file,

farad/loop-meta.php

Enjoy!

[Author]

Posts