Footer Color

realsimpleway · Member · Dec 22, 2017 at 6:25 pm
Copy link

Add topic to favorites
Hi there! I have the Business Identity Theme, and it looks like when I add the CSS code:

.footer {
background-color:black
}

That doesn’t work. Can you please help me in fixing that? Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 22, 2017 at 6:48 pm
Copy link
Hi there, there isn’t a .footer CSS class. The class for the footer area is .site-footer, so you would use something like this.
```
.site-footer {
	background-color: #000;
}
```
realsimpleway · Member · Dec 22, 2017 at 7:01 pm
Copy link
Hi there,

Thanks! That only changed the bottom portion of my site. As you scroll on my site to the footer area with the footer menus are, you’ll see it is still dark purple, but as you scroll down all the way, it is fully dark (as your CSS code worked)

By the way I must say I appreciate @thesacredpasth’s help because he is so well-taught, and always helps me! Felt like this comment was beneficial, and came from my heart :)

Thanks,
thesacredpath · Member · Dec 22, 2017 at 7:05 pm
Copy link
That section is a different div with a different CSS class, and because it has the same class as other widget areas, we have to use the CSS id instead like this. Add #tertiary to the rule I gave you before like this.
```
.site-footer, #tertiary {
	background-color: #000;
}
```
realsimpleway · Member · Dec 22, 2017 at 7:10 pm
Copy link
Hi,

Thanks so much! I appreciate that a lot!!! Most of the time, we can add CSS, but some of it may get tricky.

Also, I hope you remember us, because there was a time where we asked a question about footer cooyrights like “© 2017…”, it isn’t showing on my site.
Please help me out.

Thanks,
thesacredpath · Member · Dec 23, 2017 at 12:05 am
Copy link
To get your copyright to show, remove this from your custom CSS.
```
.site-info {
    display: none;
}
```
realsimpleway · Member · Dec 23, 2017 at 12:48 am
Copy link
Hi there!

Thanks for that! You are awesome! That is so cool! I appreciate that, because all of these worked! I trust you a lot :)

Before I end this thread since I don’t like to keep creating new ones, my header is black right now (where it says “SimpleWay.com” and the navigation menus” but I wanted it transparent, like, behind the first image.

https://www.t-mobile.com/ has an example of what I am talking about. Their header is transparent, behind a picture. So, since I have the CSS code, can i just say “transparent;” and will it work?

Thank you,
thesacredpath · Member · Dec 24, 2017 at 7:04 am
Copy link
This is a bit of a challenge since the background for the menu/logo/title area is actually the body background. Add the following to the bottom of your custom CSS and let me know if you have any issues.
```
body  {
	background-color: transparent !important;
	position: absolute;
	z-index: 1
}
#masthead {
	background-color: transparent !important;;
	position: absolute;
	z-index: 1;
	width: 100%;
	padding-right: 50px;
}
.main-navigation {
	float: right;
}
```
ismaeliea · Member · Dec 24, 2017 at 7:12 am
Copy link
Hi,

Thanks! It didn’t work, but we’ll save this CSS, and we’ll keep testing it. I appreciate your help, and don’t stress yourself out, because I don’t want you to get all in-depth. I appreciate all of your help to get my site back up and looking nice!!

Lastly, can you please help me with centering the copyright notice, (©…) to center it, instead of it being to the left? I trie to do it, but didn’t work.

Thanks,
ismaeliea · Member · Dec 24, 2017 at 7:14 am
Copy link
I also work with realsimpleway.com! I am a admin there!
thesacredpath · Member · Dec 24, 2017 at 5:50 pm
Copy link
The code I gave works when I put it into the site in my web inspector. Your Woocommerce notice at the top is overlaying it though and hiding the logo, menu and search.

For the copyright, find this rule in your custom CSS (.site-info) and change it to this.
```
.site-info {
    visibility: hidden;
    max-width: 100% !important;
    text-align: center;
    float: none;
}
```
ismaeliea · Member · Dec 24, 2017 at 6:11 pm
Copy link
Hi!

Thanks! That helps me a lot! Is it okay, if we ask another question, since I forgot to ask before?

If yes, can you help us with making the “menu” label (on mobile) to make it turn into 3 horizontal lines?

If this is too complicated, you don’t have to tell me, because I don’t want you to do too much :)

Thanks!
Alisson
thesacredpath · Member · Dec 28, 2017 at 6:39 pm
Copy link
Alisson , the menu collapses behind the Menu toggle button for mobile to keep things cleaner. In addition, the Menu behind the toggle is specifically designed to make it easy to tap on menu selections when on a mobile, and this is especially true when you happen to use submenus, which typically appear when you hover a mouse over the menu item. You can’t hover with a mobile.
ismaeliea · Member · Dec 28, 2017 at 7:20 pm
Copy link
Hi there!

Okay! Thanks for letting me know.

Well, then the last question I would want to ask is how would I be able and make the header sticky, and small (a small bar) as a user scrolls down on all devices.

Hope you can help me out!
Thanks!
Alisson
kathrynwp · Staff · Jan 2, 2018 at 3:51 pm
Copy link
As we have communicated with other members in your team, please refer to these resources related to CSS support for your site:

https://en.support.wordpress.com/custom-design/css-basics/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://en.forums.wordpress.com/forum/css-customization

You can refer to your team members Jamie and Billy for more details regarding the level of support we provide.

No items found.