Can't seem to change the font color on "custom menu" in footer with css

Shapely
1

Hello,

I have googled and tested back and forth. But I can’t seem to change the menu color to black. I can change the links but not the color for the custom menu…

See attached and the marked “about us”

Thanks for help!

Best

Philip

2

Hey there

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

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*navbar color*/
nav#site-navigation {
    background: #000;
}
/*primary menu color*/
.main-navigation .menu li a, .main-navigation .menu li{
  color:#fff;
}
/*submenu color*/
.main-navigation .menu > li ul {
    background: #000;
}
.main-navigation .menu > li ul {
    background: #000;
}

Best Regards,
Support

3

Hello!

Thanks for the help. But it still dosen’t change to “custom menu” in the footer widget. See attached prnt screen. It’s the “about us” that is marked that I would like to change.

Mush appreciated for the help!

Best

4

Hello,

Any updates regarding changing the font color on “custom menu” in footer widget?

I really appreciate the help!

Best

Philip

This is the css I have now:

body.woocommerce .main-content-inner {
width: 100%;
}
body.woocommerce div#secondary {
display: none;
}
footer#colophon {
background: #ffffff;
}
nav.navbar.navbar-default {
border-bottom: 5px solid #000000;
}
.footer-credits {
display: none;
}
#colophon a:hover{
color: #000000;
}
/navbar color/
nav#site-navigation {
background: #ffffff;
}
/primary menu color/
.main-navigation .menu li a, .main-navigation .menu li{
color:#000000;
}
/submenu color/
.main-navigation .menu > li ul {
background: #000000;
}
.main-navigation .menu > li ul {
background: #000000;
}
/Full width product grid/
body.post-type-archive-product #main form.woocommerce-ordering {
display: none;
}
.woocommerce-page #primary {

width: 100%;
}

5

Hello there,

You can use the following CSS code to change the footer menu color by going to Appearance > Customize > Additional CSS and pasting it there

/*Change footer color*/
#colophon .widget {
    color: black;
}

Best Regards,
Support

6

Hello,

Still dosen’t work. So weird.

Thanks for helping me!

Best

Philip

7

Hi,

Can you show us the website address, your previously shared URL is in maintenance mode, so we can’t able to check.

Let us know,

Thanks,
laranz.

8

Hello Laranz!

I just removed the “coming soon mode” please check http://pltsbody.com/ again

Best

Philip

9

Hello again,

Any updates regarding this?

So thankful for the help!

Best

Philip

10

Hello there,

Thanks for the link.

Please remove the previous CSS code and add this set instead:

/*Footer menu color*/
.widget.widget_nav_menu .menu > li a {
    color: red;
}

#colophon .widget .widget-title {
    color: blue;
}

Best Regards,
Support

11

Thank so much!

Can I change the font size on the menu as well?

Another question, is it possible to have a border / divider just above the footer?

Best

Philip

12

Hi,

Just add the font size along with this CSS,

.widget.widget_nav_menu .menu > li a {
    color: red;
    font-size: 18px;
}

Can you share a screenshot, where exactly you want the border? also turn off the maintenance mode, so that we can see, or point the area in our demo site.

Let us know,

Thanks,
laranz.