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

Navigation Styling Help on 2 Sites

Discussion in 'Free Divi Community Forum' started by harrystymiest, May 20, 2021.

  1. harrystymiest

    harrystymiest Member
    Divi Ultimate Header Plugin Pro Member (Support Expired)

    #1 harrystymiest, May 20, 2021
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Freelancer' Divi layout for all Pro members:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    For that case, you will need to set the below CSS for each menu item.

    Here's a sample for Home menu item. Try it in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    I see that it's already hamburger icon on desktop & it's on a white background. Though it doesn't fit the whole screen. I would suggest you to refer to the plugin developer about this issue & see what they say.
     
    #2 Divi.Help, May 20, 2021
  3. harrystymiest

    harrystymiest Member
    Divi Ultimate Header Plugin Pro Member (Support Expired)

    for sadie.sitepreview.design I figured out

    .menu-item-red {
    border-bottom: 6px solid #ff0000;
    }
    .menu-item-yellow {
    border-bottom: 6px solid #FFFF00;
    }
    .menu-item-orange {
    border-bottom: 6px solid #ffa500;
    }
    .menu-item-green {
    border-bottom: 6px solid #00FF00;
    }
    .menu-item-blue {
    border-bottom: 6px solid #0000FF;
    }
    .menu-item-violet {
    border-bottom: 6px solid #8F00FF;
    }
    .select_page { visibility: hidden; }

    I would like the lines to be higher up (close to the text) if possible

    I want the color to extend to fill the menu item when its hover/selected with white text

    For Artchick is there way to set that up without using the plugin
     

    Attached Files:

    #3 harrystymiest, May 23, 2021
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    To achieve what you want, you shouldn't be using border. As mentioned in previous post, you should use pseudo CSS.

    For example:
    Code:
    Log In or Sign Up to view this code.
    That would requires lots of custom code.
     
    #4 Divi.Help, May 23, 2021
(You must log in or sign up to post here.)