Woocommerce/Wordpress Responsive Menu Design
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hello!

One other problem I have had with this page is that I need to get the menu on the left to become a responsive menu for tablets and phones. Right now, it breaks the layout beyond a certain point of reducing the window size and then completely breaking on the switch to the responsive design.

What I would like first, to get started, is to have the site change immediately to the tablet size instead of breaking the menu to the bottom of the page for the last 100 pixels or so and then once in the responsive size, have the menu change to a hamburger style menu that sits below the header and replaces the normal menu altogether.

This should be coherent across the entire page. I am aware there is plenty of styling problems as well, but I just want to get the heavy stuff out of the way first :) I am by no means a design guru, but as long as it just looks good on a smartphone or tablet and it's easy to choose each menu point, I am happy :)

I don't know exactly how much of this can be done from the outside or if there will be a need for admin access to the back-end, but it would be great if someone could help out!

Thanks a lot guys and have a great start into the weekend!

awarded to 3pic

Crowdsource coding tasks.

1 Solution

Winning solution

Here is a simple solution.

.mobile-menu {
  display:none;
}

@media only screen and (max-width: 1030px) {
  .mobile-menu {
    display:block;
    cursor:pointer;
    position:absolute;
    right: 27px;
    top: 0px;
    z-index: 9999;
  }
  .right-sidebar .content-area {
    width: 100%;
  }
  .right-sidebar .widget-area {
    display: none;
    background-color: #ececec;
    position: absolute;
    right: 27px;
    top: 15px;
    z-index: 9999;
  }
}

<script>
  $('.mobile-menu').click( function() {
    $('.right-sidebar .widget-area').fadeToggle(750);
  });
</script>

Also add <div class="mobile-menu">Menu</div> to the header. You can style this however you want.