Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #606654

    Hi there,

    please help me in styling sidebar navigation for nested subpages. Below you can see a link to a sample page of my website.
    I would like to do the following:
    – align the menu left
    – the listing points before the menu items should started from left as well, for the pages ranked 3rd
    – I would like that the all 3rd order (ranked) pages (like the “ADATVAGYON HASZNOÍTÁS”) visually should belong to its parent (second order, ranked) page. So I need them in a grey box. The same solution like on the second link when the “bemutatkozunk” is in a grey box on the sidebar menu.
    To the third link I uploaded an image what I would like. Its just about the layot, all other styles can remain.

    I did not find a solution in the Enfold dashboard admin.
    Could you help me?
    Thanks.

    • This topic was modified 8 years ago by kazse.
    #606970

    Hey kazse!

    Thank you for using Enfold.

    Please add these css codes in the Quick CSS field:

    .sidebar_left.sidebar {
        text-align: left;
    }
    
    #top .sidebar_left .widget_nav_menu ul ul li:before {
        left: 0;
    }

    Best regards,
    Ismael

    #607211

    Thanks a lot, almost good.
    I just would like a grey box around the menu items, just like here:

    Thanks!

    #607612

    Hey!

    not sure what you want to achieve, but try this code for the link in private content:

    li.page_item.page-item-711.page_item_has_children.current_page_ancestor.current_page_parent {
    background: grey;
    }
    

    Best regards,
    Andy

    #608097

    Hello,
    i would like the same solution as on the page below.
    Thank you.

    #608180

    Hi!

    I think my code should do it. Try it, let us know and show us the result.

    Cheers!
    Andy

    #608484

    Hello,

    i tried that of course, check it. The border of the rectangle should lasts till the border of the content.
    Thanks!

    #608782

    Hi!

    then you would need to increase menu’s width:

    li.page_item.page-item-711.page_item_has_children.current_page_ancestor.current_page_parent {
    width: 127%;
    }
    

    Adjust as needed.

    Cheers!
    Andy

    #612498

    Sorry for the late answer.
    It works, thanks a lot.
    Could you please help, how to apply this to all 3rd ranked pages?
    Thanks.

    #613092

    Hi!

    what do you mean with all 3rd ranked pages? can you explain further what you are trying to achieve please? a mockup showing the result would help a lot.

    Cheers!
    Andy

    #613905

    OK.
    So when you see the subpages on the link #1 (below) all 3rd ranked pages has this grey box on the left side bar menu.
    I would like the same grey box on the left side bar menu on all 3rd rank pages: ‘other links’.

    I hope this clear. If not I will try to explain differently.
    Thanks a lot.

    #615687

    Hey!

    Please use this css code:

    .page_item_has_children.current_page_ancestor.current_page_parent {
        background: #f8f8f8;
    }

    Cheers!
    Ismael

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.