• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

[Resolved] Primary navigation background color & alignment

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Flex Theme › Primary navigation background color & alignment

  • This topic has 8 replies, 2 voices, and was last updated 7 years, 9 months ago by Joseph.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 8, 2015 at 3:10 am #531
    Joseph
    Participant

    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,

    September 8, 2015 at 3:20 am #533
    Davinder Singh Kanith
    Moderator

    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.

    September 8, 2015 at 3:55 am #536
    Joseph
    Participant

    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 7 years, 9 months ago by Joseph.
    September 9, 2015 at 3:09 pm #538
    Joseph
    Participant

    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,

    September 9, 2015 at 5:28 pm #539
    Davinder Singh Kanith
    Moderator

    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;
    }
    September 9, 2015 at 5:32 pm #540
    Davinder Singh Kanith
    Moderator

    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;
    }
    September 10, 2015 at 2:44 am #543
    Joseph
    Participant

    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

    September 10, 2015 at 2:51 am #544
    Davinder Singh Kanith
    Moderator

    Try this code to change the white background

    .site-footer .wrap {
        background-color: #8a2be2;
    }
    
    September 10, 2015 at 11:40 pm #548
    Joseph
    Participant

    Thanks Davinder.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.
Log In

Copyright © 2023 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates