CODEWITHSUNDEEP
cssmobilecss-position
OrangeGrover
OrangeGrover

Reputation: 467

Fixed Div disappears in mobile browsers

On a site that I'm working on, there is a menu that is a fixed div that shows when the screen width is less than 769px.

A fixed div is toggled when the top bar is clicked (and the menu-open class is added). 

.header nav  {
        position: fixed;
        left: -330px;
        top: 75px;
        background: #87cc33;
        width: 330px;
        bottom: 0;
        z-index: 1000;
        overflow:auto;
        /* Transitions */
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

.menu.menu-open {
    left: 0px;
}

This works fine in desktop browser, but I get some strange behavior when I use a mobile browser (or with Chrome using device mode).

In mobile, there are 2 issues:

1) The menu disappears when the content of the page is scroll-able. However, the menu toggling still works - if I try to open the menu in device mode using developer tools on Chrome it will not open, but if I disable device mode, the menu is open.

http://jsfiddle.net/yrc2bfn4/

2) If the page content is short enough so that there is no scrolling, the menu displays in device mode. However, if the device screen is small enough to cause the menu to scroll, then the menu disappears again.

http://jsfiddle.net/q63cke2u/

Upvotes: 0

Views: 2341

Answers (1)

Sean Murrin
Sean Murrin

Reputation: 125

Move the nav element outside of the header div and change the css .header nav to .menu and .header nav ul to .menu ul

http://jsfiddle.net/seanmurrin/yg0b053s/

$(document).ready(function() 
{



/****** Full Size JQuery ************/




/****** Mobile Size JQuery ************/
// Show sidebar
$(".header-image").click(function() {
	$('.menu').toggleClass("menu-open");
	$('.header').toggleClass("menu-open");
});

// Show submenu
$(".nav-lvl-1 li").click(function() {
	$(this).find("ul").toggleClass("sub-menu-open-mobile");
	$(this).find("a").toggleClass("sub-menu-open-mobile");
});


});
* {
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
}

/* Container CSS Attributes*/
h1 {
	//color: #333333;
	text-align: center;
	margin: 0px;
    padding: 0px;
}


/* Container CSS Attributes*/
h2 {
	color: white;
	text-align: center;
	margin: 0px;
    padding: 0px;
}



/* Highlight background color */
::selection {
  background: #6ab014; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #6ab014; /* Gecko Browsers */
}


/**********************************
Containers
**********************************/

/* Container CSS Attributes*/
.container {
	position: relative;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
	margin:0;
}

.h2-container {
	background-color: #6ab014;
}

/********* Side Menu **********/

.menu {
    Display:none;
}



/**********************************************************************/
/********* Start CSS for less than or equal to 768px screen ***********/
@media only screen and (max-width:768px){

	
	.header-upper, .footer-external{
		display:none;
	}
	
	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #6ab014;
		z-index: 100001;
		height: 75px;
		overflow: hidden;
		-webkit-transition: height 0.3s;
		-moz-transition: height 0.3s;
		transition: height 0.3s;
		text-align: center;
		background-image: url("/images/mobile_expand.svg");
		background-repeat: no-repeat;
	}	
	
	.header.menu-open {
		background-image: url("/images/mobile_retract.svg");
	}
	
	
	.header .header-image  img{
		content:url("/images/logo_mobile.svg");
		height: 50px;
		width: 160px;
		margin-top: 12px;
	}
	
	/********* Disable link to open sub-menu **********/
	.header .header-image a {
	   pointer-events: none;
	   cursor: pointer;
	}
	
	
	/* Stop header from overlapping container */
	.container {
		position: relative;
		margin-top: 75px;
		width: 100%;
	}
	
	.main {
		position: block;
		width: 90%;
		max-width: 80em;
		margin: 0 auto;
	}
	
	

	
	
	/********* Side Menu **********/
	.menu  {
		position: fixed;
        display:block;
		left: -330px;
		top: 75px;
		background: #87cc33;
		width: 330px;
		bottom: 0;
		z-index: 1000;
		overflow:auto;
		/* Transitions */
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.menu  ul
	{
		padding: 0;
		margin: 0;
		list-style-type: none;
	}

	
	/* Make menu above others */
	.menu {
		z-index:100;
	}

	/* Open menu CSS */
	.menu.menu-open {
		left: 0px;
	}
	

	 
	/********* Navigation Sub-menus **********/
	.menu .nav-lvl-2.sub-menu-open-mobile{
		/* Max-height may have to change with more sublinks */
		max-height: 1000px;
		display: block;
		opacity: 1;
	}

	.menu .nav-lvl-2 {
		background: #a5e25b;
		max-height: 0px;
		display: none;
		opacity: 0;
		/* Transitions */
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		transition: all .3s ease;
	}

	.menu .nav-lvl-2 a {
		border-bottom: 1px solid #fff;
	}
	

	/********* Disable links to open sub-menu **********/
	.has-sub-menu {
	   pointer-events: none;
	   cursor: pointer;
	}

	.menu li:hover {
		cursor: pointer;
	}



	/********* Link CSS **********/
	.menu a{
		display: block;
		color: #fff;
		font-size: 1.1em;
		font-weight: 300;
		border-bottom: 1px solid #a5e25b;
		padding: 1em;
		text-decoration: none;
	}


	
	/******* Mobile dropdown arrow - down *********/
	a.has-sub-menu:not(.sub-menu-open-mobile):before {
		position: absolute;
		content: "";
		left: 290px;
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 11px solid #fff;
		margin-top: 7px;
	}

	/******* Mobile dropdown arrow - up *********/
	a.has-sub-menu.sub-menu-open-mobile:before {
		position: absolute;
		content: "";
		left: 290px;
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 11px solid #fff;
		margin-top: 7px;
	}



	/******* dropdown link css *********/
	a.has-sub-menu:hover:before,
	a.has-sub-menu:focus:before,
	a.has-sub-menu:active:before {
	  border-color: transparent #730800;
	}

	a.has-sub-menu:hover:after,
	a.has-sub-menu:focus:after,
	a.has-sub-menu:active:after {
	  border-color: #730800;
	}
	
	
	/* Stop header from overlapping container */
	.container.first {
		margin-top: 75px;
	}

	
		
	
}
/********* End CSS for less than or equal to 480px screen ***********/
<!DOCTYPE html>



<body>



<div class="header">
	<div class="header-inner">
		<h1 class="header-image"><a href="/"><img src="/images/logo.svg" /></a></h1>
	</div>
</div>
<nav class="menu">
    <ul class="nav-lvl-1">
        <li><a href="/">Home</a></li>
        <li><a class="has-sub-menu" href="/Platform/">Platform</a>
            <ul class="nav-lvl-2">
                <li><a href="http://google.com/">test1</a></li>
                <li><a href="http://google.com/">test2</a></li>
                <li><a href="http://google.com/">test3</a></li>
                <li><a href="http://google.com/">test4</a></li>
            </ul>	
        </li>
        <li><a class="has-sub-menu" href="/modules/">Modules</a>
            <ul class="nav-lvl-2">
                <li><a href="http://google.com/">test1</a></li>
                <li><a href="http://google.com/">test2</a></li>
                <li><a href="http://google.com/">test3</a></li>
                <li><a href="http://google.com/">test4</a></li>
                <li><a href="http://google.com/">test5</a></li>
                <li><a href="http://google.com/">test6</a></li>
                <li><a href="http://google.com/">test7</a></li>
                <li><a href="http://google.com/">test8</a></li>
                <li><a href="http://google.com/">test9</a></li>
                <li><a href="http://google.com/">test10</a></li>
                <li><a href="http://google.com/">test11</a></li>
                <li><a href="http://google.com/">test12</a></li>
            </ul>	
        </li>
        <li><a href="http://google.com/nav">Hosting</a></li>
        <li><a class="has-sub-menu" href="http://google.com/nav">Resources</a>
            <ul class="nav-lvl-2">
                <li><a href="http://google.com/">test1</a></li>
                <li><a href="http://google.com/">test2</a></li>
                <li><a href="http://google.com/">test3</a></li>
                <li><a href="http://google.com/">test4</a></li>
                <li><a href="http://google.com/">test5</a></li>
            </ul>	
        </li>
        <li><a class="has-sub-menu" href="/contact/">Contact Us</a>
            <ul class="nav-lvl-2">
                <li><a href="http://google.com/">test1</a></li>
                <li><a href="http://google.com/">test2</a></li>
                <li><a href="http://google.com/">test3</a></li>
            </ul>	
        </li>
    </ul>
</nav>



<!-- Begin Container -->
<div class="container h2-container">	
	<div class="main">
		<h2> 
			H2 Title
		</h2>
	</div>
</div>

<!-- Begin Container -->
<div class="container">	
	<div class="main">
		
	</div>
</div>
<!-- End Container -->

<!-- Begin Container -->
<div class="container">	
	<div class="main">
		This is content.  
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
	</div>
</div>



<!-- Begin Container -->
<div class="container">	
	<div class="main">
		This is content.  This is the last container.
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		This is content
		<br><br><br>
		Final content in the document.
	</div>
</div>
<!-- End Container -->

Upvotes: 1

Related Questions