Create New Topic

Generic Theme Submenu Issue

Home Forums Projects Generic Theme Submenu Issue

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #4754

    nrahm
    Member

    My main menu won’t expand to their submenu links when I’m viewing my website on mobile. The links are just titles, and I want them to show their sub links when you click on them. Any way to change this? The menu shrinks to a toggle when you shrink the browser. I’ve tried several strings of code to the CSS and nothing seems to work.

    #4756

    Bryan Hadaway
    Keymaster

    This is by design. Generic is meant to be very simple and lightweight.

    Here’s something a bit more advanced for you to give a try:

    #menu{clear:both}
    #menu ul, #menu ul li{display:inline}
    #menu ul li a{display:inline-block;font-family:'lucida grande',helvetica,arial,verdana,sans-serif;font-size:16px;color:#777;line-height:51px;text-decoration:none;padding:0 20px}
    #menu ul li a:hover{color:#777;text-decoration:none;background:#eee}
    #menu .current-menu-item a, #menu .current_page_item a{color:#aaa}
    #menu .current-menu-item .sub-menu a, #menu .current_page_item .children a{color:#777}
    #menu ul > li:first-child a:hover{border-radius:0}
    #menu .sub-menu li a, #menu .children li a{line-height:14px !important;padding:8px 14px !important;border-radius:0 !important}
    #menu li .sub-menu, #menu li .children{margin-left:-1px}
    #menu ul li{position:relative}
    #menu li ul{display:none;position:absolute;top:35.5px;left:0}
    #menu li ul a{background:#eee}
    #menu ul ul li:hover ul, #menu ul ul ul li:hover ul{top:29px;left:0;margin:-34px 0 11px 200px}
    #menu ul li:hover ul{display:inline-block}
    #menu ul ul, #menu ul li:hover ul ul, #menu ul ul li:hover ul ul{display:none}
    #menu ul li:hover ul, #menu ul ul li:hover ul, #menu ul ul ul li:hover ul{display:block;z-index:2147483647}
    #menu ul li:hover ul li a, #menu ul ul li:hover ul li a, #menu ul ul ul li:hover ul li a{font-size:13px;line-height:30px;width:200px;padding:0 14px;margin:-1px 0 0}
    #menu ul li:hover ul li a{}
    #menu ul ul li:hover ul li a{}
    #menu ul ul ul li:hover ul li a{}
    #menu ul li:hover ul li a:hover, #menu ul ul li:hover ul li a:hover,#menu ul ul ul li:hover ul li a:hover{background:#eee;opacity:1}
    #menu .toggle{display:none;color:#000;text-align:center;line-height:51px}
    
    @media all and (max-width:767px){#menu label.toggle{display:block}#menu ul{display:none}#menu input.toggle:checked + div > ul{display:block}#menu input.toggle:checked + div > ul li a{display:inline-block;box-sizing:border-box;width:100%;border-right:none}#menu .sub-menu, #menu .children{position:absolute;width:180px;left:100%;margin-top:0;margin-left:-180px !important}#menu ul li:hover ul ul, #menu ul ul li:hover ul ul{top:26px;margin:0 !important}#menu .sub-menu a, #menu .children a{width:180px !important}}

    And you’ll want to remove the stuff related to #menu from @media all and (max-width:768px){} as well.

    If you’re not looking to dig around in code, a quick and dirty solution might be to just install a plugin to handle it for you:

    https://wordpress.org/plugins/responsive-menu/

    Thanks

    #4757

    nrahm
    Member

    Bryan,

    I used the code you provided and it didn’t work. If you’d like to take a look at the website I am trying to fix, it is this one: http://deltaphiomega.noshinr.com

    #4758

    Bryan Hadaway
    Keymaster

    I tested the code above and it works as-is, but it looks like you’ve already customized your menu a great deal, which makes it very difficult for me to trace what’s been changed and what remains the same in order to adjust.

    I’d need to get in there and see your code first-hand. Normally, I’d just use Firebug, but when it comes to dropdown menus and all the layers and hover and click effects, it makes it difficult. And I couldn’t really spend time “getting in there” unless you were paying me.

    So, I’d recommend just replacing the whole menu with https://wordpress.org/plugins/responsive-menu/ and then re-customize the look.

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