3

I programmed a website for web- and mobiledevices and uploadet it to a domain. Some how the navbar dont want to collapse on my smartphone, if I resize the browser to the same size it works perfect (look at the screenshots).

Mobile Screenshot of the page Mobile Screenshot of the page

PC Screenshot of the page PC Screenshot of the page

My code snipped for the navbar:

 <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">PageName</a> </div> <div class="collapse navbar-collapse" id="myNavbar-1"> <ul class="nav navbar-nav hidden-sm hidden-xs"> ...(some tabs) </ul> <ul class="nav navbar-nav pull-right hidden-sm hidden-xs"> ...(some tabs) </ul> <ul class="nav navbar-nav visible-sm visible-xs"> ...(some tabs) </ul> </div> </div> </nav>

Edit Solution: I forgot to add the

<meta name="viewport" content="width=device-width, initial-scale=1">

tag. Now it works fine.

Improve this question
3
  • 2
    Do you have a viewport meta tag defined in the head, eg. <meta name="viewport" content="width=device-width, initial-scale=1">? (If not, might be worth reading about.) Commented Jul 29, 2015 at 17:09
  • @Serlite that was the solution, I knew I forgot about something.. thx! Commented Jul 29, 2015 at 17:12
  • possible duplicate of Responsive web design is working on desktop but not on mobile device Commented Jul 29, 2015 at 17:14

1 Answer 1

Reset to default
1

In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

To ensure proper rendering and touch zooming, add the viewport meta tag to your head part:

<meta name="viewport" content="width=device-width, initial-scale=1">

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.