Hi there everyone!
I used this demo to try to adapt to a page I’m working on. Here’s my attempt: http://schwim.net/after5
If you click the menu in the demo, a flyout shows up from the left with the menu entries inside. If you click the hamburger on my attempt, however, a blank frame shows up from the left. Does anyone see what I’ve messed up while adapting this to mess up the mobile view of the menu?
Thanks for your time!
You are using the an oveflow-x:scroll. So remove it from
@media only screen and (max-width: 768px) {
...
.site-content {
position: absolute;
top: 66px;
right: 0;
left: 0;
bottom: 0;
padding-top: 0;
overflow-y: scroll; // Delete this line
-webkit-overflow-scrolling: touch;
}
...
}
If you need the scroll, in case you have many menu items, add it to the .menu class.
You will see that you have a 66px gap at the top. That looks wrong to me, if you didn’t intend to have that. Change the top:66px above to top:0 and you’ll be fine.
Hi,
the html is out of order and you are absolutely placing your content instead of the menu.
You need something like this:
<!DOCTYPE html>
<html class=''>
<head>
<title>test</title>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* BASE */
html, body {
font-family: 'Roboto', sans-serif;
font-size: 1em;
line-height: 1.4;
height: 100%;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
.container {
overflow: hidden;
*zoom: 1;
margin: 0 20px;
}
.site-content {
padding-top: 10px;
}
/* HEADER */
.logo{display:block;margin:auto;}
.header {
position: fixed;
left: 0;
right: 0;
height: 66px;
line-height: 66px;
color: #fff;
background-color: #000000;
}
.header__logo {
font-weight: 700;
line-height: 4;
padding: 0 25px;
float: left;
}
/* MENU */
.menu {
float: none;
text-align:center;
}
.menu a {
padding: 0 10px;
}
.menu a:hover {
color: #c5cae9;
}
#navigation {
padding:10px;
background:#333;
color:#FFF;
overflow:hidden;
}
#navigation.sticky {
position:fixed;
width:100%;
top:0;
}
#spacer {
display: none;
}
/* RESPONSIVE */
@media only screen and (max-width: 768px) {
.site-pusher, .site-container {
height: 100%;
}
.site-container {
overflow: hidden;
}
.site-pusher {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.header {
position: static;
}
.header__icon {
position: relative;
display: block;
margin: 0 auto;
width: 50px;
height: 1.4em;
cursor: pointer;
}
.header__icon:after {
content: '';
position: absolute;
display: block;
width: 1rem;
height: 0;
top: -4px;
left: 15px;
box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: #3849a2;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
width: 250px;
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
.menu a {
display: block;
height: 40px;
text-align: center;
line-height: 40px;
border-bottom: 1px solid #3f51b5;
}
.with--sidebar .site-pusher {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
.with--sidebar .site-cache {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
}
}
</style>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet'>
</head>
<body>
<div class="site-container">
<div class="site-pusher">
<img class="logo" src="http://schwim.net/after5/images/logo.png" alt="">
<div id="spacer"> </div>
<header id="navigation"> <a href="#" class="header__icon" id="header__icon"></a>
<!--<a href="#" class="header__logo">Logo</a>-->
<nav class="menu"> <a href="#">ABOUT</a> <a href="#">PACKAGES</a> <a href="#">LOVE NOTES</a> <a href="#">LOOKBOOK</a> <a href="#">CONTACT</a> </nav>
</header>
<div class="site-content">
<div class="container">
<h1>Responsive Navigation Bar</h1>
<p>Tutorial by Grafikart.fr <a href="https://www.youtube.com/watch?v=_X2N_yw9Boo" target="_blank" style="color: blue">https://www.youtube.com/watch?v=_X2N_yw9Boo</a> </p>
<p>UI Color Palette from <a href="http://www.google.com/design/spec/style/color.html" target="_blank" style="color: blue">Google Material Design</a> </p>
<h2>Animals</h2>
<ul>
<li>Sabre-Toothed Tiger</li>
<li>Old English Sheepdog</li>
<li>Little Penguin</li>
<li>Striped Rocket Frog</li>
<li>Snapping Turtle</li>
</ul>
<h2 style="background-color: #fff176; display: inline">Hint</h2>
<p>Resize the browser window to toggle</p>
<h2>Breakfast</h2>
<figure> <a href="http://commons.wikimedia.org/wiki/File:Grilled_ham_and_cheese_014.JPG" target="_blank"> <img src="http://upload.wikimedia.org/wikipedia/commons/5/50/Grilled_ham_and_cheese_014.JPG" alt="By Glenlarson at English Wikipedia (en.wikipedia) [Public domain], via Wikimedia Commons" style="width: 100%; height: auto;"> </a>
<figcaption style="font-size: smaller">Breakfast.01 - The picture above has cheese though, mine has no cheese.</figcaption>
</figure>
<p>I make ham sandwiches in the morning with toasted bread and a cup of fresh milk every weekend.</p>
<p>Bacon ipsum dolor sit amet beef kielbasa pancetta sirloin, landjaeger sausage kevin hamburger frankfurter ham.Consequat laborum ham hock culpa pork filet mignon kevin, ribeye leberkas sed tri-tip corned beef ut dolore exercitation.</p>
<p>Ground round chicken cow, tongue porchetta sirloin salami kielbasa pork prosciutto venison pork chop capicola.</p>
</div>
<!-- END container -->
</div>
<!-- END site-content -->
<div class="site-cache" id="site-cache"></div>
</div>
<!-- END site-pusher -->
</div>
<!-- END site-container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
var $navigation = $('#navigation');
var originalOffset = $navigation.offset().top;
var $spacer = $('#spacer');
$spacer.height($navigation.outerHeight());
$(window).scroll(function(){
var offset = originalOffset - $(window).scrollTop();
$navigation.toggleClass('sticky', offset <= 0);
$spacer.toggle(offset <= 0);
});
});
</script>
<script>$(document).ready(function () {
(function ($) {
$('#header__icon').click(function (e) {
e.preventDefault();
$('body').toggleClass('with--sidebar');
});
$('#site-cache').click(function (e) {
$('body').removeClass('with--sidebar');
});
}(jQuery));
});
</script>
</body>
</html>
Hi there @PaulOB l,
It looks absolutely fantastic but when it’s in mobile view, there’s no scroll bar and the page won’t scroll via mouse wheel. Here’s a screenie of what I’m seeing (latest stable chrome):
The page is: http://schwim.net/after5
Do you see any reason why this would be happening?
You set a height and you hid the overflow 
Change the height to auto and it should scroll.
@media only screen and (max-width: 768px){
.site-container{height:auto;min-height:100%}
#navigation.sticky{position:static}
}
You also have a sticky menu messing up the small screen display so you probably want to disable that at smaller screens.
Hi there Paul, should I be doing that via php or javascript(I have a mobile detection script in uses on the site) or is there a way to handle disabling it on small screens?
I usually just force it with css but it depends on your script I suppose. I didn’t look at the script but if its just adding a css ‘sticky’ class then you can negate that with more important css at the smaller screen view. However if you are animating with javascript then you may need to disable with javascript. That’s why I prefer to add css classes and let css animate and then you can control it through the css.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.