Looks perfect on desktop, even when you reduce the browser smaller than the 640px but when I open the website on my phone the background images are really huge and just doesnt seem to work well at all.
Also right now on mobile I have the nav set to display:none is it easy to convert my current nav only on mobile devices to like a push menu or like something where has the three lines you click on and it displays below.
If I’m correct the background issue may be the fixed background as I would like to keep the same effect as the web version which I’ve seen done before just not sure how to execute it on mobile. Still puzzled about why my background images are gigantic on mobile. Tried something different then background-size: cover but still didnt work.
I’m in a bit of a rush today but the way I get fixed background images to work on devices like the iphone is to use fixed elements instead and apply the normal background image to the fixed element.
There’s a codepen here that shows the technique. However, looking quickly at your page I don’t think that method will be of any use because you are only revealing the background images depending on which element passes over it and I can’t see a way to do that with fixed elements. You may just have to live with non-fixed images on mobile. If you revert them to standard non fixed images on smaller devices that should sort out their size as well.
Regarding the three line nav menu then that’s pretty easy to implement. You just include the html for the mobile nav bar in the page and hide it on desktop in the media query. At smaller width you reveal the mobile menu and hide the main menu in the same media query. You would then need to add some JS to show the menu again when the icon is clicked as that can’t really be handled with css only.
Thanks Paul. How do I create that three line navigation for Mobile devices. Maybe I will need to stick with non fixed elements for the background images.
One thing though I go to the website on my phone and the background images are gigantic. The first one is ok but the others are huge…
I looked on an iphone and the image looked the same size to me. Have you tried removing ‘fixed’ for mobile and see if it makes a difference to the image size. Have you got a screenshot.
How do I create that three line navigation for Mobile devices
I’m not sure what you are asking exactly but you can just create an image to use or use something like this. Or did you mean how to code the html and css for it?
Yes it works on the ipad but the menu is on two lines in landscape because you applied a width to the floated nav. You never want to give widths to text content like that because browsers render the text at different widths and it just doesn’t fit in the width you set. Just remove the width altogether.
actually dont have fixed background on them I don’t believe.
Yes you do, they all have fixed in the media query here: #slide9 {
background: url(./img/slide9.jpg) 50% 0 no-repeat fixed;
If you remove the fixed from that background rule in that media query you will find that the image will display at their correct size as I have been saying all along
Here’s a simplified version of the mobile menu approach.
Just make yourself the hamburger icon and apply it to the mobile nav element.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
html, body {
margin:0;
padding:0
}
ul {
margin:0;
padding:0;
list-style:none
}
#nav { float:right; }
#nav li {
display:inline;
margin: 0 10px;
}
#mobile-nav {
display:none;
float:right;
padding:1px 35px 1px 7px;
background:#0972c4 url(images/mobile-nav.png) no-repeat 90% 50%;/* hamburger image does here */
border-radius:1px;
margin:0 5px 10px;
color:#666;
font-weight:bold;
cursor:pointer;
text-align:center;
line-height:49px;
height:49px;
color:#fff;
z-index:999;
border:1px solid #0067b7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size:18px;
}
@media screen and (min-width:801px) {
#nav { display:block!important }/* important needed as js shows menu with inline style*/
}
@media only screen and (max-width : 800px) {
#mobile-nav { display:block }
#nav {
display:none;
background:rgba(0,0,0,0.3);
clear:both;
width:auto;
float:none;
}
#nav li {
display:block;
width:auto;
float:none;
border-bottom:1px solid red;
margin:0;
}
#nav li a {
display:block;
padding:10px 0;
text-align:center;
}
#nav li a:hover {
background:#f00;
color:#fff;
}
}
</style>
</head>
<body>
<header id="header">
<div id="mobile-nav">Menu</div>
<nav id="nav">
<ul>
<li><a href="#slide2" class="active" title="About" >About</a></li>
<li><a href="#slide4" title="Programs">Programs</a></li>
<li><a href="#slide6" title="Stats">Stats</a></li>
<li><a href="#slide8" title="Memberships">Memberships</a></li>
<li><a href="#slide10" title="Contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- implement click menu for mobile -->
<script>
jQuery(document).ready(function() {
$("#header").on( "click", "#mobile-nav", function() {
$('#nav').fadeToggle();
});
});
</script>
</body>
</html>
There are many other ways to do it such as sliding the menu off to the side but the above is pretty easy to implement. You may want to absolutely position the nav when it shows in mobile view but it depends on whether you want to push content down or not.
