Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Wordpress Responsive Multi Level Drop Down Menu

Discussion in 'Website Coding & Programming Forum:' started by HippySunshine, Feb 5, 2017.

  1. HippySunshine

    HippySunshine Senior Member

    So I've been playing around with a new theme on Wordpress which includes a multi level drop down menu.
    I'm having issues with the responsive drop down and was hoping someone could shed some light as to what I've done wrong or what I need to do.

    The code I have is:
    (excuse the messy and excessive code, it needs tidying up but I've completely lost track of what I've broken in this lot)

    .main-navigation {
    display: block;
    width: 100%;
    }

    .main-navigation ul {
    text-align: center;
    padding: 10px;
    margin: 0;
    display: none;
    list-style: none;
    }

    .main-navigation li {
    display: inline-block;
    position: relative;
    cursor: pointer;
    }

    .main-navigation a,
    .main-navigation a:visited,
    .main-navigation a:active {
    color: #222 !important;
    font-size: 0.7em;
    font-family: 'Montserrat';
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 5px;
    display: block;
    padding: 10px 25px;
    }
    .main-navigation a:hover {
    text-decoration: none;
    }

    .main-navigation ul ul a {
    color: #222 !important;
    padding: 20px 25px;
    }
    .main-navigation ul ul {
    background: #eee;
    float: left;
    position: absolute;
    top: auto;
    left: -999em;
    }
    .main-navigation ul ul ul {
    background: #eee;
    left: -999em;
    top: -10px;
    }
    .main-navigation ul ul ul ul {
    background: #eee;
    left: -999em;
    top: -10px;
    }
    .main-navigation ul ul ul ul ul {
    background: #eee;
    left: -999em;
    top: -10px;
    }



    .main-navigation ul ul a {
    width: 200px;
    }

    .main-navigation ul ul li {
    }

    .main-navigation li:hover > a,
    .main-navigation li.focus > a {
    }

    .main-navigation ul ul :hover > a,
    .main-navigation ul ul .focus > a {
    }

    .main-navigation ul ul a:hover,
    .main-navigation ul ul a.focus {
    }

    .main-navigation ul li:hover > ul,
    .main-navigation ul li.focus > ul {
    left: auto;
    }

    .main-navigation ul ul li:hover > ul,
    .main-navigation ul ul li.focus > ul {
    left: 100%;
    }

    .main-navigation .current_page_item > a,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_ancestor > a {
    }

    /* adds menu hamburger icon */
    .menu-toggle:after {
    font-family: FontAwesome;
    font-style: normal;
    content: "\f0c9";
    display: inline-block;
    margin-left: 5px;
    }

    /* adds arrow on drop down items */
    .main-navigation ul li.menu-item-has-children > a:after {
    margin-left: 5px;
    content: "\25bc ";
    position: absolute;
    }

    .main-navigation ul li ul li.menu-item-has-children > a:after,
    .main-navigation ul li ul li ul li.menu-item-has-children > a:after {
    margin-left: 5px;
    content: "\25b6";
    position: absolute;
    }


    /* Small menu. */
    .menu-toggle,
    .main-navigation.toggled ul {
    color: #222 !important;
    font-size: 1em;
    font-family: 'Montserrat';
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 5px;
    background: #faf1ea;
    padding: 15px;
    border: none;
    display: block;
    width: 100%;
    outline: none;
    }

    .main-navigation.toggled ul {
    background: #eee;
    padding: 0;
    }
    .main-navigation.toggled ul li {
    margin: 0;
    display: block;
    width: 100%;
    }
    .main-navigation.toggled ul li a {
    border-bottom: 1px solid #ddd;
    padding: 15px;
    }


    .main-navigation.toggled ul li:hover > ul,
    .main-navigation.toggled ul li.focus > ul {
    background: #fafafa;
    display: block;
    position: relative;
    }
    .main-navigation.toggled ul li ul li a {
    width: 100%;
    }


    @media screen and (min-width: 1280px) {
    .menu-toggle {
    display: none;
    }
    .main-navigation ul {
    display: block;
    }
    }

    The link to the site I'm working on is http://ohlily.pixelboutique.co.uk

    Thanks in advance for any help. My brain is shortly going to explode and I know it's probably something pretty simple.
     
  2. Paul Murray

    Paul Murray Moderator Staff Member

    I think I see the problem you're having. This "works" on a mobile layout but I haven't looked at it back on desktop. You might have to tweak it a little more but I was at least able to use the mobile menu through Chrome.

    First set
    Code:
    .main-navigation.toggled ul {
    display:inline-block;
    }
    Then
    Code:
    .main-navigation.toggled ul li {
    display:inline-block;
    }
    These two blocks should make it possible to see and click on the sub menus.Then set
    Code:
    .main-navigation ul ul li:hover > ul {
    left:auto;
    }
    This is set to 100% which is pushing them off screen.

    In future definitely look to switch to using something like Sass for writing CSS. You've got a lot of defunct and pointless styles applied and have repeated a lot of stuff. Using Sass or Less will help you write code that's easier to maintain and is DRY (Don't Repeat Yourself).
     
  3. HippySunshine

    HippySunshine Senior Member

    I should have clarified that what isnt working is the sub menu dropdowns in the mobile view... thanks for that though and yeah my css needs looking at and tidying, its just mid break down.
     
  4. HippySunshine

    HippySunshine Senior Member

    Thank you so much this worked. I need to tidy up my CSS and am aware I have a lot of repetition, I'm still in the playing process.
     
  5. HippySunshine

    HippySunshine Senior Member

    Responsive multi level drop down menus are my worst nightmare. For some reason I can't get my head around it. So if anyone has a useful tutorial to share I would be very grateful.

    How is your site coming along Emily?
     
  6. HippySunshine

    HippySunshine Senior Member

    Ok I'm having serious issues with getting my head around Wordpress Responsive Multi Level Drop Down Menus.
    Does anyone have a complete source or tutorial that I could look at that is specifically for WP? I've hit a brick wall and this is the only area of WP that I struggle with and end up with very messy code :(
     
  7. HippySunshine

    HippySunshine Senior Member

    What are you struggling with?
     

Share This Page