Custom CSS: Pena template / header colours & menu text colour

forestbathe · Member · Mar 2, 2018 at 8:24 pm
Copy link

Add topic to favorites
Hello,

I’m new to CSS. Template for the site is Pena. Looking over the forum I’ve managed to find the code to change:
1. the header background colour from black to light grey
2. the colour of the text in the menu from white to black
3. the colour of the footer

This is the CSS I’ve added so far:

.standard-menu .site-header {
background: #FCFCFC;
}
.main-navigation ul li a {
color: #000000;
}
#colophon {
background-color: #A9A9A9 !important;
}
#site-navigation ul ul li {
background: #FCFCFC ;
}
#site-navigation ul ul li a {
color: #000000 !important;
}

Two sticking points are:
1. Black boarder remaining around the drop-down menu (About section); even though I’ve successfully changed some of the background in the drop-down & text colour
2. On mobile view the collapsed ‘Menu’ is still in white, and now on a light background, so can’t be seen (dont know how to change the colour of the text and menu box).

Help, much appreciated

Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 3, 2018 at 3:11 am
Copy link
Hi there, there is a black background to the sub-menu div and the following custom CSS will turn it the same as the li background color you have set.
```
@media screen and (min-width: 55em) {
  .main-navigation ul ul {
    background: #FCFCFC;
  }
}
```
And this will get the menu toggle button color to black.
```
#site-navigation button {
  color: #000;
}
```
I noticed that the content in your header section goes right up against the left and right border of the window/screen. You can add the following to put just a bit of left and right padding on it so that it is easier to read on smaller screens.
```
.homepage .header.section .content-caption {
  padding-left: 20px;
  padding-right: 20px;
}
```
forestbathe · Member · Mar 3, 2018 at 2:15 pm
Copy link
Thank you so much – works great!
You’re a star.
thesacredpath · Member · Mar 3, 2018 at 4:52 pm
Copy link
Hooray and you are welcome!

No items found.