Child Pages as Second Line Menu

  • 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: (visible only to logged in users)

  • sandymcfadden · Staff ·

    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.

  • 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!

  • sandymcfadden · Staff ·

    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;
}
  • 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

  • sandymcfadden · Staff ·

    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!

  • 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?

  • sandymcfadden · Staff ·

    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.

  • jbpaul17 · Member ·

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

  • sandymcfadden · Staff ·

    No problem at all.

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