Primary navigation background color & alignment

[Joseph]

Hi support,
I try to change the primary navigation background color using these code screenshot: http://prntscr.com/8dv86y But it appears like this screenshot: http://prntscr.com/8dv7v2

How can I change all the background color, and change the menu text alignment to center?

Regards,

[Davinder Singh Kanith]

For background color issue, use following code

.site-navigation,
.site-navigation .wrap {
background: #8a2be2;
}

To make menu center align,
1. Go to Appearance > Customize.
2. Expand “Primary Nav Extras” option, uncheck (no tick) this option.
Menu will center align automatically.

[Joseph]

Thanks Davinder for the code. Can you please provide me the background color code for site-footer and footer widget as well?

The center alignment doesn’t work even after uncheck the extra option screenshot: http://prntscr.com/8dvfx5

Regards,

• This reply was modified 6 years ago by Joseph.

[Joseph]

Hi Davinder,
I manage to center the menu by placing this code:
text-align: center under .genesis-nav-menu {

But I would appreciate if you could provide the code for site-footer and footer widget as well. I try around but couldn’t change the whole block.

Regards,

[Davinder Singh Kanith]

For footer widgets, change following code…

.footer-widgets, .footer-widgets .enews p, .footer-widgets a {
    color: #444;
}

to…

.footer-widgets, .footer-widgets .enews p, .footer-widgets a {
    color: #444;
    background: #8a2be2;
}

[Davinder Singh Kanith]

For site footer area

1. Add background color to following code…

.site-footer {
    border-top: 1px solid #e3e3e3;
    color: #444;
    font-size: 14px;
    line-height: 1.3;
    padding: 20px 0;
    text-align: center;
}

to…

.site-footer {
    border-top: 1px solid #e3e3e3;
    color: #444;
    font-size: 14px;
    line-height: 1.3;
    padding: 20px 0;
    text-align: center;
    background-color: #8a2be2;
}

2. Change background color in following code…

.wrap {
    background-color: #fff;
    margin: 0 auto;
    max-width: 1140px;
    padding: 0 30px;
}

to…

.wrap {
    background-color: #8a2be2;
    margin: 0 auto;
    max-width: 1140px;
    padding: 0 30px;
}

[Joseph]

Hi Davinder,
I add this code:

.site-footer {
    border-top: 1px solid #e3e3e3;
    color: #444;
    font-size: 14px;
    line-height: 1.3;
    padding: 20px 0;
    text-align: center;
    background-color: #8a2be2;
}

and it’s appear like this screenshot: http://prntscr.com/8eluis How can I just change this white color?

As if I use the other code of this:

.wrap {
    background-color: #8a2be2;
    margin: 0 auto;
    max-width: 1140px;
    padding: 0 30px;
}

the whole page change as those screenshots:
http://prntscr.com/8elx07
http://prntscr.com/8elx54
http://prntscr.com/8elx86

[Davinder Singh Kanith]

Try this code to change the white background

.site-footer .wrap {
    background-color: #8a2be2;
}

[Joseph]

Thanks Davinder.

[Author]

Posts