Hi there, I’d like to make the navigation bar in www.sntravel.co.uk homepage more responsive.
At the moment it just becomes taller in height when the width of the screen gets smaller and disappears on mobiles as it would take too much space off the page.
Is there a way to make it become a menu so that when they tap the menu icon it would cascade into the navigation, but vertical ?
Yes, use media queries. When you get below a certain width, change up the CSS for hte navigation. Many frameworks actually use a second navigation placed elsewhere (if needed) and have that displayed when needed in mobile.
@media screen and (max-width: 641px) and (min-width: 420px)
That’s your media query (you should note that 420 isn’t the minimum pixel width that is available on mobile)…
In that, just take care of business.
Hi Ryan,
Thanks for the tip.
Problem is I don’t know how to style a menu bar and also make it disappear if scrolling down.
Well when you get to mobile width (under a certain size) you can either reformat it with CSS, or display:none; it to make it go away, and for the MOBILE menu, make that appear via display:block; (have that display:none’d for non-mobile view)
Edit: That’s assuming you want two different menus. If you can reformat the single menu then by all means, do it.
Yeah that’s what I’m asking. I need some template or help designing the mobile menu 
I don’t know how to apply them.
I’m looking at this one but when I download it, it doesn’t really make any sense to me.
http://plugins.adchsm.me/slidebars/
I downloaded the ZIP. Which example do you want implemented? Which page? Which sidebar? Be specific and I’ll tell you what to do.
Hi Ryan, I’m trying to use the one the link has, which creates a left sliding menu when they press the menu button, but I only need the left one
Download the Zip. Copy this HTML into your <head> section. You’ll need to put their scripts up on your server too
<link rel="stylesheet" href="slidebars/slidebars.css">
<link rel="stylesheet" href="example-styles.css">
Add this somewhere in your <body> section
<span class="sb-toggle-left">Toggle left Slidebar</span>
You can make that any HTML element as long as it has the class on it.
Then this is the menu. Put this on the page in the <body> section too
<div class="sb-slidebar sb-left">
<p>Pizza</p>
</div>
Then you’ll need these RIGHT BEFORE </body> .
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Slidebars -->
<script src="slidebars/slidebars.js"></script>
<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>
Obviously use their scripts provided in the ZIP that you can download.
The final output is something like this.
<!doctype html>
<html>
<head>
<title>Using Fixed Positions with Slidebars Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Slidebars CSS -->
<link rel="stylesheet" href="slidebars/slidebars.css">
<!-- Example Styles -->
<link rel="stylesheet" href="example-styles.css">
<style>
.sb-slidebar{background:blue!important;}/*PURELY FOR AESTHETICS FOR THIS EXAMPLE - RYANREESE*/
</style>
</head>
<body>
<div id="fixed-top" class="sb-slide">
<span class="sb-toggle-left">Toggle left Slidebar</span>
<span class="sb-toggle-right">Toggle right Slidebar</span>
</div>
<div class="sb-slidebar sb-left">
<p>Pizza</p>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Slidebars -->
<script src="slidebars/slidebars.js"></script>
<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>
</body>
</html>
I tried but I can see just a text, not the navigation bar of the example.
After I click it slides but doesn’t move the content to the right and merges with it.
Need to see the code you’re working with - my example works so something must have been applied incorrectly 
Ok I tried again, now I see this
but when I click it doesn’t go anywhere.
If you go to http://www.sntravel.co.uk/switchview.pl?list=1
and choose the second option (navnew) you will see the test environment where the script is still up so you can see the source code.
Where is the Javscript file? Did you include that? I don’t see it. And the header is overlapping the red bar so I had to manually change that z-index to 1000 to override your header just so I could activate the slider.
Carefully go over my example code. Make sure all files and code are accounted for. HTML looks good - but JS, CSS? I don’t see everything. Can you find it 
?
Ok I’ve added back the script in. Can you check now?
it’s not sliding right
It is for me? The main content isn’t sliding over because the c ontent is already slid over enough…
My example has all the content that will be moved over in the #fixed-top .sb-slide element. Can’t you do the same?
Oh, I didn’t know that.
I will try tomorrow, thanks.
hi Ryan, that helps.
ok it seems to be working, thanks a lot Ryan
