1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved button text colour on nav?

Discussion in 'Free Divi Community Forum' started by lill, Aug 17, 2024.

  1. lill

    lill New Member

    hi i have a buttin on the nav as below, the navigtion text is white .
    https://oorpo.com/

    but on this page i neef the the nav color black, and the buttitn colour text white , i cant get the button to show with white text.

    i have used a diffent memu for this page and a button class on the menu item , with the below css
    https://oorpo.com/about-us/

    .header-button-alt{
    background-color: black;
    padding: 10PX!important;
    border-radius: 30px;
    margin-top: -2px!important;
    color: #fff !important;

    }
    .header-button-alt a, .header-button-alt a:hover, .header-button-alt a:active {
    color: #fff !important;
    }
    .header-button-alt:hover {
    background-color: #42b677;
    }
     
    #1 lill, Aug 17, 2024
    1. PRO MEMBER PERKS Divi Block Pro - Premade slide in bar design for your Divi site without using any plugins:View Demo
  2. Divi Booster

    Divi Booster Divi Expert

    Hi lill,

    Try adding this CSS:

    Code:
    Log In or Sign Up to view this code.
    The inclusion of the #menu-main-menu-alt id should make this rule more "specific" than rule applying the existing black color to the header links, and so should let the white color take effect.

    Let me know if that doesn't work.
     
    #2 Divi Booster, Aug 17, 2024
  3. lill

    lill New Member

    thanks that worked .
     
    #3 lill, Aug 25, 2024
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  4. Divi Booster

    Divi Booster Divi Expert

    You're welcome, lill. I'm glad that worked :)
     
    #4 Divi Booster, Aug 25, 2024
  5. lill

    lill New Member

    Would you happen to know ho i get a fotoer menu coloum to display side by side on mobile. As in attached pics
     

    Attached Files:

    #5 lill, Aug 26, 2024
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  6. Divi Booster

    Divi Booster Divi Expert

    Hey lill, it looks like you might already have found a solution to get two columns on mobile, using "flex"?

    If you want to sharpen it up a bit more, you could add the following CSS:

    Code:
    Log In or Sign Up to view this code.
    It will put the visa bureau logo on its own line as in your screenshot above, while leaving the More Info / Where To blocks side-by-side. It also fixes the "where to...?" header, preventing it from being split across two lines. And finally, it separates out the Coming soon block by adding some space above it (if you don't want this, just leave out the last of the three CSS rules.

    Hope that's what you had in mind.
     
    #6 Divi Booster, Aug 26, 2024
  7. lill

    lill New Member

    hi that didn't seem to work ,
     
    #7 lill, Aug 26, 2024
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  8. Divi Booster

    Divi Booster Divi Expert

    Hi lill,

    It doesn't look like the CSS is getting added into the page.

    I'm not sure where you're currently adding the CSS, but if you haven't already done so, try adding it at:

    WP Admin > Divi > Theme Options > General > Custom CSS

    Then clear any caches you are using on the site.

    Also, please use this slightly modified version of the code (I forgot to restrict what I gave you before to mobile only, sorry):

    Code:
    Log In or Sign Up to view this code.
    Hopefully that will ensure the CSS is added to the page and able to take effect. If it still doesn't work after that, please let me know.

    Thanks!
     
    #8 Divi Booster, Aug 26, 2024
  9. lill

    lill New Member

    Hi ive added thst , but it doesnt' seem to be working
     
    #9 lill, Aug 27, 2024
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  10. Divi Booster

    Divi Booster Divi Expert

    Hey lill,

    I can see the changes now:
    visa-bureau.png
    Hopefully you're seeing the same thing but, if not, try clearing your browser cache / mobile browser cache to ensure your device is loading the latest version of the page.
     
    #10 Divi Booster, Aug 27, 2024
  11. lill

    lill New Member

    hi i have done that and still cant see on mobile
     
    #11 lill, Aug 28, 2024
    1. PRO MEMBER PERKS Divi Login Customizer Plugin - Instantly beautify your Wordpress login page with 6 premade designs:Learn More
  12. lill

    lill New Member

    hi i have done that and still cant see on mobile
     

    Attached Files:

    #12 lill, Aug 28, 2024
  13. Divi Booster

    Divi Booster Divi Expert

    Okay, I see. The problem is that on screen widths smaller than 480px, Divi adds an additional style which sets the columns to be 100% width. This is overriding the two column layout that you already have working on larger mobile widths (up to 980px).

    You should be able to correct it by adding this CSS:

    Code:
    Log In or Sign Up to view this code.
    Hope it helps!
     
    #13 Divi Booster, Aug 28, 2024
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  14. lill

    lill New Member

    Hi i think that has worked , thanks
     
    #14 lill, Aug 29, 2024
  15. Divi Booster

    Divi Booster Divi Expert

    You're welcome, lill. I just checked and it looks good to me :)
     
    #15 Divi Booster, Aug 29, 2024
    1. PRO MEMBER PERKS Divi Block Pro - Premade gradient text design for your Divi site without using any plugins:View Demo
(You must log in or sign up to post here.)