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 Apply styling to ancestor menu item (menu module)

Discussion in 'Free Divi Community Forum' started by Sbuch, Aug 1, 2021.

  1. Sbuch

    Sbuch New Member

    Hello,

    I'm trying to stylise the ancestor item in a menu module, to be applied in the child pages.

    Example:

    https://samuelbuchoul.com/publications/by-type/

    On this page, the menu plugin items will only give up to the page "publications", but i would like this item to be coloured differently, even if i'm on a child page (publications/by-type).

    I've been trying the following CSS code, but it's not working...

    .lwp-hide-mobile-menu .current-menu-item>a .lwp-hide-mobile-menu .current-menu-ancestor>a {
    color: #464f6e !important;
    }

    Thank you for your help!

    SB
     
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
  2. Problemizer.com

    Problemizer.com Divi Expert

    Hello Sam,

    Can you first explain this?
    upload_2021-8-2_4-52-42.png

    How can users even get to the URL you posted https://samuelbuchoul.com/publications/by-type/? I tried, but the above screenshot is all I can see when I hit "publications".
     
  3. Sbuch

    Sbuch New Member

    Hello, yes sure i can explain it. I'm working on the child pages first, which are not accessible to the public right now, unless they have the direct link. When i'm done working on the child pages (adding some textual content and fixing technical issues such as the topic of this thread) I'll apply the same page design to the parent page, namely : image module with the logo, menu module, the three buttons, and the vertical tabs. Then, the links between the parent page and the child pages will be open both ways.

    Thanks for your help,

    SB
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade gradient text design for your Divi site without using any plugins:View Demo
  4. Sbuch

    Sbuch New Member

    Let me also add that you seem to have accessed that "page", seen in your screenshot, through the base url of the website - which was first designed as a single page, with all the sub-"pages" coded as tabs. But that made some features impossible to set up, so i moved towards creating regular sub-pages. But right now, users would only access the initial page with the main, big tabs module, and not the actual child pages (/publications and /publications/by-type, for instance) - unless they directly enter those url. Once all the changes are done, i'll switch fully to a more regular system, with a homepage and subpages.
     
  5. Problemizer.com

    Problemizer.com Divi Expert

    Can you please try this CSS?
    Code:
    Log In or Sign Up to view this code.
    Let me know if that worked.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  6. Sbuch

    Sbuch New Member

    Thank you! It worked indeed.

    So basically, the ancestor code can't work here? Perhaps because the child page is not actually placed as a sub item in the menu?

    I'll apply that code for each page where i need it. I know where to find the id number of each page. But where can i find the id of each menu item?

    Thanks a lot, best,

    SB
     
  7. Problemizer.com

    Problemizer.com Divi Expert

    I didn't focus on why your CSS doesn't work, I just suggested what I know will work. But I think you need to have the menu installed for your way to work.

    To find the menu item ID, just right click on the menu item you need the ID for and hit Inspect and you will see the IDs immediately.
    upload_2021-8-3_2-22-8.png
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo
  8. Sbuch

    Sbuch New Member

    Great, thanks ! Thanks for your help, i really appreciate it.