0

I have a menu that's within a div that I hide off screen. When the menu-button is pressed I bring the menu in to view. Whilst doing this, I shift the visible content of the body over to one side, allowing room for the menu.

When I originally did this, I placed overflow-x:hidden; in the body and it worked perfectly for desktops. When I loaded the website on to my phone, I noticed that the phone didn't behave the same - it attempt to display the menu and all of the content that was on the screen.

I did a little reading and it stated that mobile browsers ignore overflow-x when placed in the html or body tags and a wrapper div should be created.

When i made this edit my menu vanished. When I click the menu-button, the content moves across for the menu but it doesn't appear. What is going on here? I don't quite understand why the menu would disappear. How can I fix this?

The wrapper that I made is....

#body_wrapper{
        overflow-x: hidden;
    }
<div id="body_wrapper">
  My nav bar...
  My menu...
  my content...    
</div>

My website is - http://robingham.co.uk/LUUCC6/index.php

This current edit of the website has the overflow-x:hidden; set in the body of the CSS, not the body_wrapper. So the menu displays but it doesn't properly function on a mobile.

ab29007
  • 7,611
  • 2
  • 17
  • 43
Shocker_33
  • 107
  • 2
  • 2
  • 11

1 Answers1

0

So i fixed my issue! Whoop!

Originally i was using .animate() in Jquery for my menu animation. The menu would hide offscreen and using the animate function i would 'slowly'(285px in 0.3s) move the menu in to place on screen. Whilst this worked perfectly fine for desktop browsers where i placed overflow-x: hidden; in to the CSS for the body. Mobile browsers ignore overflow-x: hidden; when placed in the body.

Reading around i saw many times about placing overflow-x: hidden; in to a wrapper for the body content. Ie. content . Whilst it indeed stop a scroll bar popping up for the x-axis and content being shrunk, it screwed up my menu - my menu just vanished. For whatever reason putting overflow-z: hidden; in to the wrapper didn't agree with the Jquery animate function. I tried placing the menu outside of the wrapper but still no luck. I also tried playing overflow-x: hidden; in to both the wrapper and the body with no success.

Okay so time for a new strategy, as i spent far too long playing with my menu to just scrap it.

My solution

I currently have my menu sat outside of the wrapper and so i've decided to keep overflow-x: hidden; in both the body and the wrapper. Maybe an overkill but at least i know it'll function as intended regardless of the browser. Maybe in the future, i'll have a little faff with putting the menu back within the wrapper and only have the overflow-x: hidden; in the wrapper and see if it still works. (I kind of don't like having many things that do the same/similar job scattered everywhere. It feels a little messy.)

The menu has three associated classes attached to it now. menu, menu_hide, and menu_show. menu has all of my CSS formatting. I use the menu_hideand menu_show classes to hide and show the menu.

My default HTML for the menu looks like this. Note that it has two classes.

<div class="menu menu_hide">

My CSS for the hide and show look like this. Note that transition does the same job as the Jquery .animate() function.

.menu_show{
    transition: 0.3s;
    left: 0px;
}

.menu_hide{
    transition: 0.3s;
    left: -285px;
}

My JS looks like this. Note that i toggle between the menu showing and hiding classes everytime i hit the menu button.

$('.icon-menu').click(function() {
     $('.menu').toggleClass( "menu_show menu_hide" );
});
Shocker_33
  • 107
  • 2
  • 2
  • 11