Child Pages as Second Line Menu

  • Author
    Posts
  • #1983952

    jbpaul17
    Member

    I’m trying to find a theme (free or paid) that supports showing the second level of the main menu when a second level exists off the first level menu item selected. If not that, then I’m hoping for some CSS Customization to help achieve this.

    Using my site (http://oursaviorwestchester.com/) as an example, when someone is in the Church or Preschool sections I’d like the second level menu (child pages) to be visible horizontally beneath the first level main menu (instead as a drop down). I’ve searched through the themes available, but cannot seem to find one that supports this. Does anyone have a theme that they believe works like this? Any assistance would be greatly appreciated… thanks!

    The blog I need help with is oursaviorwestchester.com.

    #1984207

    Hi jbpaul17,

    There could be but I’m not sure of any themes right off that do that out of the box.

    However I played with some CSS and I think the following code in the CSS Customization should get you close to what you are looking for.
    It will likely need some tweaking but it should be a real good start.

    .current-menu-item .sub-menu,
    .current-menu-item:hover .sub-menu,
    .current-page-ancestor .sub-menu,
    .current-page-ancestor:hover .sub-menu{
        display: block !important;
        position: absolute;
        left: -100px;
        width: 1200px;
        height: auto;
        clip: inherit;
        overflow: auto;
    }
    .current-menu-item,
    .current-page-ancestor {
        margin-bottom: 30px;
    }
    .current-page-ancestor .current-menu-item {
        margin: 0;
    }
    .current-menu-item .sub-menu li,
    .current-page-ancestor .sub-menu li {
        width: initial;
        float: left;
        margin: 0;
        padding: 0;
    }
    .current-menu-item .sub-menu li a,
    .current-page-ancestor .sub-menu li a {
        width: auto;
    }

    Let me know if that gets you close.

    #1984256

    jbpaul17
    Member

    @sandymcfadden – that created the second line sub-menu, the when you hover over the first line main menu it still displays the vertical dropdown menu. Is there a way to show that as horizontal instead? Thanks!

    #1984257

    I’ve made some modifications. Let me know if this is what you’re looking for.

    .sub-menu,
    li:hover .sub-menu,
    .current-menu-item .sub-menu {
        display: block !important;
        position: absolute;
        width: 100% !important;
        height: auto;
        clip: inherit;
        overflow: auto;
    }
    .current-menu-item {
        background-color: #220E10;
    }
    #navbar {
        margin-bottom: 30px !important;
    }
    .sub-menu li {
        width: initial;
        float: left;
        margin: 0;
        padding: 0;
    }
    .nav-menu li {
        position: static;
    }
    .sub-menu li a {
        width: auto !important;
    }
    .main-navigation {
        position: static;
    }
    #1984271

    jbpaul17
    Member

    @sandymcfadden – you are a css ninja! A couple questions:
    1) When a child page is selected, is there a way to have the second level menu still displayed as it is on the parent page main menu items?
    2) When Preschool is selected, the Church child page menu doesn’t appear on-hover. Is there a way to enable that?

    #ioweyouabeer

    #1984272

    Thanks for the compliment, but you really owe me nothing :-)
    Let’s try this code, I think it will do everything you mentioned.

    .sub-menu,
    li:hover .sub-menu,
    .current-menu-item .sub-menu,
    .current_page_ancestor .sub-menu {
        display: block !important;
        position: absolute;
        width: 100% !important;
        height: auto;
        clip: inherit;
        overflow: auto;
    }
    .current-menu-item {
        background-color: #220E10;
    }
    #navbar {
        margin-bottom: 30px !important;
    }
    .sub-menu li {
        width: initial;
        float: left;
        margin: 0;
        padding: 0;
    }
    .nav-menu li {
        position: static;
    }
    .sub-menu li a {
        width: auto !important;
    }
    .main-navigation {
        position: static;
    }
    li:hover .sub-menu {
        z-index: 999999;
    }
    .current_page_ancestor a {
        background-color: #220E10;
        color: #FFF;
    }

    Let me know!

    #1984277

    jbpaul17
    Member

    @sandymcfadden – again, the ninja css skills! The Preschool second level menu appears to overlap the main content on the pages, is there a way to design around that with CSS?

    #1984278

    I’m not at a place where I can really test it out right now, but I’m pretty sure if you increase the number on this line of code

    #navbar {
        margin-bottom: 30px !important;
    }

    From 30 to something higher it should push the content down a bit further.

    Let me know.

    #1984281

    jbpaul17
    Member

    @sandymcfadden – a solid #hattip to you sir, that did it; muchas gracias!

    #1984282

    No problem at all.

The topic ‘Child Pages as Second Line Menu’ is closed to new replies.