Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 6, 2014 at 5:10 am #330700
    jeffharris

    I’m using a sidebar menu just like your new photography theme demo. I have a few pages in a sub menu that I would like always displayed.

    My menu structure is as follows:

    Portfolio
    Music
    People
    Travel

    Is there a way to always display these sub menu items instead of the current ‘fly out’ method when I click on the parent menu item (portfolio)?

    October 7, 2014 at 3:51 am #331324
    Ismael

    Hi jeffharris!

    Thank you for using Enfold.

    You can use this on Quick CSS or custom.css:

    ul.sub-menu {
position: relative !important;
left: 20px !important;
opacity: 1 !important;
visibility: visible !important;
}

    Use google inspector or firebug to change the look of the sub menu.

    Regards,
    Ismael

    October 7, 2014 at 2:59 pm #331633
    jeffharris

    Thanks Ismael. That accomplished what I wanted to display the sub menu. I used google inspector to look at the formatting of the rest of the elements, but that ended up being a little over my head. I tried a few different things, but couldn’t figure out how to style the sub menu the way I wanted. If you could help me, that would be greatly appreciated.

    – How to I remove the left and right border on the sub menu?
    – How do I make the bottom border the same length as all the other menu borders (currently it’s indented with the sub menu)?
    – How do I add additional padding below the bottom border so that the spacing is consistent with the other menu items?
    – How to I remove the hover color (currently the sub menu item/box turns gray when you hover over it)?

    I’ve left this in place on my site so that you can see what I’m talking about: http://jeffharrisphoto.net

    Thanks for your help!

    October 9, 2014 at 4:31 am #332874
    Josue

    Hi!

    Try with this code:

    ul.sub-menu {
    position: relative !important;
    left: 0px !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10000;
    box-shadow: none !important;
    border-bottom: 1px solid #e1e1e1;
    width: 100%;
}
.sub-menu li, .sub-menu li a{
    float: none !important;
    display: block !important;
}
.sub-menu a{
    background: transparent !important;
    border: 0 !important;
}

    Regards,
    Josue

    October 9, 2014 at 6:47 pm #333395
    jeffharris

    That worked great!!! Thanks so much Josue.

    One follow up question. Is there a way to reduce the spacing/padding between the sub menu items, but still leave the padding the same after the last sub menu item in the list? I’ve implemented your code so you can see it in action on my site. I’m hoping to reduce the padding between ‘music’ and ‘people’ along with any additional sub menu items I may add down the road.

    Thanks again for your help!

    Jeff
    http://jeffharrisphoto.net

    October 9, 2014 at 7:55 pm #333424
    Josue

    Hey!

    Try adding this:

    .sub-menu a{
    padding: 5px 8px !important;
}

    Adjust as needed, first value (5px) is top & bottom padding, second value (8px) is left & right padding.

    Cheers!
    Josue

    October 9, 2014 at 10:17 pm #333465
    jeffharris

    Awesome! Thanks Josue!

    October 9, 2014 at 11:49 pm #333499
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

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