How to change color of the menu bar?

Activello
1

Hi,

I’d like to change the color of my menu bar for black. Could you help me do this?

the website is: www.biggerthanlimits.com

Anna :slight_smile:

2

Also, I would like to change the color of footer.

Hope you’re having a good day :slight_smile:

3

Hey! I stumbled upon this actually because I was trying was also trying to change my top menu bar cover. This worked for me!

nav.navbar.navbar-default {
background: #000;
color: #fff;
}
nav.navbar.navbar-default ul ul a {
color: #000;
}
nav.navbar.navbar-default a {
color: #fff;

4

Also for the footer

footer#colophon, footer#colophon .copyright, footer#colophon .copyright a {
background: #000;
color: #fff;
}

5

Thank you so much!

The Menu color change worked perfectly but the footer didn’t (I inserted footer widgets by myself maybe that’s the issue?) I know how to change the background color of the separate ones but it only works like for a piece of it (picture attached) while I want the whole area of the footer in different color.

Could anyone help with that one?

6

Hi @annag92,

I hope you are well today and thank you for your question.

You can try changing color of whole footer area by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

#footer-sidebar,
#footer-sidebar a,
#footer-sidebar h3,
body .my-copyright {
background: #000;
color: #fff;
overflow: hidden;
width: auto;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

7

Hi, thank you for your reply.

It worked but only for the main part of the footer (picture attached) and I want the whole area to be in color.

Is it possible to do that?

8

You can try using the below CSS code to apply color on whole footer area.

.container.main-content-area {
    max-width: 100%;
    width: 100%;
}

But the footer widgets will be displayed left aligned until you add another div inside the footer widget area div footer-sidebar

9

I’ve managed to align the footer but what about the bottom part? (highlighted in the picture attached)

10

You can remove the bottom part by using the below CSS code.

.container.main-content-area {
    margin-bottom: 0;
}
.my-copyright {
    padding-bottom: 40px;
}
11

Hi,

When I change the color of the footer there’s no hover when I scroll over the topics in the footer (it’s gold without changes).

How can I add that?

12

To help us keep support thread separates could you please create new thread for each of your other questions here https://colorlibsupport.com/c/activello/ instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.