BootStrap Site Not Responsive When Resizing On PC?

Hello,

My site currently uses the BootStrap framework, and if you go here, then resize your browser, you can see everything looks mobile responsive at first.

However, try clicking the menu at the top right corner, and the links do not come down like normal.

I'm not sure how to debug this issue, so I was wondering if you know what's wrong, and more importantly, how did you find out what was wrong?
Andy_FangAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
You need the jquery library before other resources that rely on it e.g. bootstrap
And why do you have two version in your page 1.10 and 1.6 and you also have the bootstrap js in there twice as well (though second one doesn't exist)
0
Andy_FangAuthor Commented:
Hey, and thanks for the reply.

I've cleaned up the code a bit, but I'm not sure what you mean by referencing jQuery twice, as I could only see 1 version from GoogleCode:
<!-- Bring in the jQuery! -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- LeakStack core CSS -->
<link href="/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<!-- Leakstack extras -->
<link href="/assets/css/docs.css" rel="stylesheet"/>
<link href="/css/style.css" rel="stylesheet"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="/css/bs-docs-2.css" rel="stylesheet"/>

Open in new window


I also did what you said and placed jQuery first, however there was no difference.
0
GaryCommented:
I'm not familiar enough with bootstrap to know where to look but here's a quick fix you can add to your code
jQuery(".navbar-toggle").click(function(){$(".navbar-collapse").toggle()})
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Andy_FangAuthor Commented:
Not sure what you mean by that, I'm using the jQuery CDN.
0
GaryCommented:
After the jquery library in your head add this
<script>
jQuery(".navbar-toggle").click(function(){$(".navbar-collapse").toggle()})
</script>

Maybe someone else will come along who knows bootstrap better, there were bugs with this in previous version but I couldn't find anything for v3.0
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
First thing to always check is errors.  

HTML and CSS errors first.  Take care of this and make the validator light up green before moving on.  http://validator.w3.org/check?uri=https%3A%2F%2Fleakstack.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Next, use google console or firebug to check for js errors.   You are loading insecure content from http://code.jquery.com/jquery-latest.js. but your site is https.  

Even after you fix that error, check again.

Next thing to do is isolate it. I like to use jsbin.  jsbin allows you to easily bring in the latest jquery, bootstrap and other libraries.  When I copied your code and pasted just the nav  http://jsbin.com/EwuBaDa/1/edit?html,output  it worked fine.  This means the problem is in your code errors.  Once you fix those, the navbar will work.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Also, I noticed you are loading jquery multiple times.

You first should load all css  files, then under the css load your js files.  Jquery first, then libraries.

There is no need to use jQuery(".navbar-toggle").click(function(){$(".navbar-collapse").toggle()}) because  it is done via data-toggle="collapse" data-target=".navbar-ex1-collapse" in the button code.  Bootstrap is set up to look for data-toggle="something"  in place of jquery.
0
Andy_FangAuthor Commented:
Alright, I loaded jQuery first and the CSS second, as well as fixing some validation errors, however it seems to be another issue.

<!-- Bring in the jQuery! -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<!-- LeakStack core CSS -->
<link href="/css/style.css" rel="stylesheet"/>

<!-- Leakstack extras -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What is the problem?

What I can see is the order is still wrong and you have the wrong jquery.


1) CSS for any libraries or themes

2) Your custom css

3) Jquery

4) Bootstrap

5) your custom js


Jquery is either on version 1.1 if you want to support older IE or version 2 if you don't want to support older IE.  Version 2 is going to be a smaller file.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.