Hierarchical list of links appears flat.

  • Resolved tricarte

    (@tricarte)


    5 years, 4 months ago

    In additional content area, I’m using this [widget id=”multi_col_cats-3″] shortcode to output a hierarchical list of custom taxonomy links. It’s the “Shortcode Widget” plugin that basically outputs a custom written widget. And that custom widget outputs those links using wp_list_categories([“hierarchical” => true]). Everything works fine but below css selector destroys the hierarchy and makes all the link items align to the left.

    #responsive-menu-container *

    Actually problem comes from margin: 0px; rule of the above selector.
    Removing this selector from DevTools fixes the hierarchy but I couldn’t find a way to disable it using Plugin Admin page or some CSS magic. I think I’m fighting with CSS Inheretence here but I’m no CSS guru.

    <div id="responsive-menu-container">
  <li class="categories"></li>
</div>

    In simple terms, I want ‘li.categories’ not inherit CSS properties from #responsive-menu-container div.

    Thank you in advance.

    • This topic was modified 5 years, 4 months ago by tricarte.
    • This topic was modified 5 years, 4 months ago by tricarte.
Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi,

    Hope you are doing good!

    Thanks for the query. Let us give some time to look into the issue, we will get back to you soon with the resolution to the problem.

    Regards,
    Kriti

    Hi,

    Please post the URL to the website that is showing this issue.

    I am not able to replicate it on test site. I need to see the problem on the website. Perhaps it could be a conflict with the theme’s CSS.

    On our test site for responsive menu free plugin, I had created a test page. In the test page, I used WordPress editor to add a widget category block into content. On the widget category block setting, I had selected hierarchy. One the front end, it’s retaining it’s hierarchy list style. This is link to test page https://responsive-menu-stg1.expresstech.dev/testing-wp-category-widget/

    Regards,
    Kriti

    Thread Starter tricarte

    (@tricarte)

    Thanks for the quick response.

    Unfortunately I can send you a test site link later in the day. But the described problem happens only in the responsive menu container area, not in usual page content area unlike what you do in the test site you sent. I mean you output hierarchical links in Gutenberg controlled area but I output them in responsive menu container.

    Thread Starter tricarte

    (@tricarte)

    Here is a test site that is online for 24 hours (I’m sorry).

    https://victorious-seahorse.w6.poopy.life/

    In responsive menu, ‘Software’ category link must be a few characters right under ‘Techno’ category link because they have a parent/child relationship. But they are ordered left aligned.

    user: demo
    password: 8l9q36KKKUat

    Interestingly enough, if I disable ‘padding: 0’ from css rule below using DevTools:

    #responsive-menu-container {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

    the problem disappears unlike before where I disable ‘margin: 0;’.

    • This reply was modified 5 years, 4 months ago by tricarte.

    Hi,

    We have come up with the following custom CSS to fix the issue:

    #responsive-menu-additional-content .widget_categories .children li {
    position: relative;
    left: 20px;
    }

    This is how it should look on your website after applying the custom CSS code.

    https://drive.google.com/open?id=1-WDXPRmDIfjSuVgiZIFfhOy56psCbxEX

    Regards,
    Kriti

    Thread Starter tricarte

    (@tricarte)

    YES!!!.
    Thank you for the quick solution.

    Hi,

    We are glad that your problem is resolved now.

    Regards,
    Kriti

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Hierarchical list of links appears flat.’ is closed to new replies.