We Keep Coding

Javascript button active when site loaded

I made a site with a responsive design for smartphones etc.
The menu goes away and a button appears to open the menu when you are using a smartphone.
To activate the button i implemented this javascript:
$(document).ready(function() {
$('.menubutton').click(function() {
$('.nav').slideToggle('slow');
});
});
But when i go on the website with my smartphone the menu is standard openend. But i want that if i go on the site the menu is closed. How can i do this?
PS:
Sorry i never really worked with javascript before :)

Do with css media query
#media only screen and (max-width: 500px) { //fix size as you wish
.nav{
display:none;
}
}

You have to use media query (in your CSS file) and specify at what point should it go to a hamburger menu.
The following media query will trigger the menu to hide as soon as the screen size is 767px:
.navbar-toggle {
display: block;
}
#media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}

Can't display:none my mobile menu button

I'm building a site for giggles http://briannabaldwinphotography.com/. My mobile menu button won't go away with display:none in safari on my iphone landscape mode, although it works in Chrome on my phone. I want the #menu-button to show when the device is under 500px and to disappear when it is above 500px. The menu button is added in through jquery with the id of #menu-button. If you use dev tool and look in the sources for css_tablet.css you'll see I have #menu-button set to display:none. Any advice much appreciated.
$("#menu").addClass("js").before('<div id="menu-button"><img src="third_logo.png" alt="menu"></div>');
$("#menu-button").click(function(){
$("#menu").toggle();
});
$("li").click(function(){
$("ul").hide();
});

Add this CSS -
#media screen and (min-width: 500px) {
#menu-button {
display: none;
}
#menu.js{
display: block !important; // You must have to use '!important' as javascript adding inline style on the menu (display block/none)
}
}
Above CSS will solve the Button hiding issue and also the issue we talked on the last comments.
For better understanding of Media Queries for different devices. Look at this article - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

In your "css_tablet.css" all the css is defined within a media query which is applied only to screens with a min-width of 500px.
#media screen and (min-width: 500px) {
#menu-button {
display: none;
}
... more css ...
}
In portrait view, an iPhone 5 is 320px wide, iPhone 6 is 375px and iPhone 6+ is 414px. So all of these phones dont apply the css from your "css_tablet.css" stylesheet.
So it isn't phone/tablet specific.

Overlay banner doesn't show up on mobile view

Here is the website in question:
site removed
As you can see at the top right of the homepage there is a banner that overlays the graphics on the site. It shows the Rolex brand so customers can see the affiliation. Unfortunately, when you view it on a mobile device the overlay banner doesn't show up at all and I have no idea why.
Any and all help is appreciated, thank you!

It is defined in your bootstrap.css
#media (max-width: 480px) {
#overlay {
display: none;
}
}
The problem is not the mobile device but the screen width.

This is the one:
#media (max-width: 480px) {
#overlay {
display: none;
}
}

How to hide section tag element on mobile

I have a one page html5 website where each page/section is in a section id = "name"
How would i hide one of these sections for example the "Place and Order" section if the website was being viewed on a mobile device?
The website is here - http://mk18.web44.net/
If its possible , I would also like to hide the menu option for that perticular page.

You can add a media query for mobile devices.
#media only screen and (max-device-width: 480px) {
element {
display: none;
}
}

Reference the IDs for the sections you want to hide in a media query. To hide the "about" section on screens that are up to 600px wide:
#media screen and (max-width: 600px) {
#about {
display: none;
}
}

Webpage Fitting To Every Screen Reslution

I Use This Code To Automatically Detect Users Screen Resolution And Redirect To Another Page
<script>
if (screen.width==1367 && screen.height==768)
{
window.location="http://www.yoursite.com"
}
</script>
But For Every Screen Resolution I Cant Edit The Site.
Is It Possible That I Just Make Single Page That Can Automatic Fit To Screen.
Thank-You IN Advance.

You could use CSS3 media queries rather than javascript to detect the device and load the page accordingly.
#media only screen and (max-width: 999px) {
/* rules that only apply for canvases narrower than 1000px */
}
#media only screen and (device-width: 768px) and (orientation: landscape) {
/* rules for iPad in landscape orientation */
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* iPhone, Android rules here */
}
You would also need to add the meta port view tag as below:
<meta name="viewport" content="initial-scale=1.0">

You can use media queries and specify different stylesheets for different screens.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
for example
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
For examples of already put up websites see: http://mediaqueri.es/

'defau1t' is write. Also you can set it by css like=> "width:100%"; you can check http://www.w3schools.com/js/js_window.asp too. Everything depends on your requirements.