1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, 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 Desktop dropdown line colour & hover rectangle colour

Discussion in 'Basic Support Forum' started by ThemeUser, Apr 25, 2020.

  1. ThemeUser

    ThemeUser Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    On the desktop, in Header & Navigation Style 3, how can the colours of these elements be changed:

    - Dropdown menu line colour (horizontal lines between menu links)

    - Hover rectangle colour (rectangles that appear behind menu links upon mouseover)

    I have tried changing the Dropdown Menu Line Color in the Fullwidth Menu Settings window, but it does nothing.

    Thanks in advance for your assistance.
     
    #1 ThemeUser, Apr 25, 2020
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Are you referring to this:

    upload_2020-4-26_11-25-28.png

    If yes, then try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    **Change the color code to fir your need.

    But if you're referring to this horizontal line:

    upload_2020-4-26_11-26-54.png

    Then, just go to menu module settings & change the border option.
    For this, it can be changed in Theme Customizer > Divi Ultimate Header Plugin > Header & Navigation Styling > Menu Hover Main Color
     
    #2 Divi.Help Pro Support, Apr 25, 2020
  3. ThemeUser

    ThemeUser Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Thanks, but I am referring to the actual dropdown menu. For example, if your top level link is called "More", and there are 3 additional links beneath that in the dropdown, called "Subscribe", "Contact", "Policies", the dropdown would look like this:

    More >

    Subscribe
    --------------
    Contact
    --------------
    Policies

    Divi includes *horizontal* rgba lines between the nested links (as illustrated above).

    Divi also includes rgba background rectangles behind those nested links, which appear upon mouseover.

    I am not able to change the colour of either of these elements.
     
    #3 ThemeUser, Apr 25, 2020
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring unique comment design on single blog post page:View Demo
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Kindly share your URL. I think that's coming from your custom CSS, not Divi module settings.
     
    #4 Divi.Help Pro Support, Apr 26, 2020
  5. ThemeUser

    ThemeUser Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I have removed all custom CSS, and the problem is still there.

    If you still need to review the site, I would prefer to provide the URL in a PM, as this is a client website.
     
    #5 ThemeUser, Apr 26, 2020
    1. PRO MEMBER PERKS Divi Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site:Learn More
  6. ThemeUser

    ThemeUser Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    An update:

    I was able to fix the problem not by removing my custom CSS, but by removing custom javascript provided by ET on an earlier date, which was located in...

    Divi > Theme Options > Integration > Add code to the <head> of your blog

    Sorry for the confusion.
     
    #6 ThemeUser, Apr 26, 2020
  7. ThemeUser

    ThemeUser Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Actually, sorry. My "update" post above does not apply to this thread. Please kindly ignore it.

    To recap...

    I have removed all custom CSS, and the problem is still there.

    If you still need to review the site, I would prefer to provide the URL in a PM, as this is a client website.
     
    #7 ThemeUser, Apr 26, 2020
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring unique comment design on single blog post page:View Demo
  8. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Just sent you a PM. Kindly check.
     
    #8 Divi.Help Pro Support, Apr 26, 2020
  9. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I don't see any horizontal lines between nested links. Here's the screenshot:

    upload_2020-4-27_17-1-6.png

    As for the background rectangles upon hover, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    Tweak the value to fit your need.
     
    #9 Divi.Help Pro Support, Apr 27, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  10. ThemeUser

    ThemeUser Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    That code for the background rectangles upon hover works perfectly. Thanks so much!

    As for the horizontal lines that are supposed to appear between stacked links in the desktop dropdown menu, attached is a screenshot of the Divi setting that is supposed to control this (it is called Dropdown Menu Line Colour). However, this feature is not working, which I verified by removing all custom CSS and then reloading the site.
     

    Attached Files:

    #10 ThemeUser, Apr 27, 2020
  11. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Dropdown menu line color is actually referring to this:

    upload_2020-4-27_22-53-17.png

    There's no option to add line between each dropdown menu items.

    But you may try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #11 Divi.Help Pro Support, Apr 27, 2020
    1. PRO MEMBER PERKS Divi Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site:Learn More
  12. ThemeUser

    ThemeUser Member
    Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    You're right. It is the Divi theme's "help" description which is confusing things. It says, "...the dividing line between links in dropdown menus". It should say, "...the dividing line between the parent (or "top level") link and the dropdown menu beneath it". Oh, well.

    Thanks very much for the code. I'll tweak it so that it matches the left & right margins of Divi's hover background rectangles.

    Appreciate the amazing support!
     
    #12 ThemeUser, Apr 27, 2020
(You must log in or sign up to post here.)