CODEWITHSUNDEEP
htmlcssangularjsresponsive-designnavigation
ewizard
ewizard

Reputation: 2862

Responsive Web Design with Bootstrap CSS

I have built a site that I am trying to make responsive...with Bootstrap CSS it is actually fairly easy - but I am running into a weird problem. Everything works fine...except when I visit one page (the "Settings" page), when I'm holding my iPhone upright...the links stop working in the navbar (I try to click on them but nothing happens). However, if I turn my iPhone, and hold it horizontally, the navbar links start working again. Has anyone ever seen this problem? Here is relevant code:

navbar.html (I am using angular, and it doesn't make sense for the nav buttons to function on one page...and not on another):

<div class="header" ng-controller="NavbarCtrl">
  <h2 id="redbox" class="text-muted">[H]</h2><h3 class="text-muted">ackabox</h3>
  <ul class="nav nav-pills pull-right">
    <li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
        <a ng-href="{{item.link}}">{{item.title}}</a>
    </li>
    <li ng-hide="currentUser" ng-class="{active: isActive('/login')}"><a href="/login">Login</a></li>
    <li ng-show="currentUser" ng-class="{active: isActive('/settings')}"><a href="/settings">Settings</a></li>
    <li ng-hide="currentUser" ng-class="{active: isActive('/signup')}"><a href="/signup">Sign up</a></li>
    <li ng-show="currentUser" ng-class="{active: isActive('/logout')}"><a href="" ng-click="logout()">Logout</a></li>
  </ul>
</div>

I don't really know what else to include for code...it just seems like a glitch with responsive web design that might have some weird solution I don't know about. Any help would be greatly appreciated.

UPDATE

I posted the site to git: https://github.com/eamonwhiter73/hackabox

Node modules are included...you just have to run MongoDB instance...and then cd to the site directory in your console...and type grunt serve. That will load the site automatically into the browser on localhost:9000.

Also, for MongoDB to function - mind this line in lib/config/env/development.js:

...

uri: 'mongodb://localhost/hackabox'

...

You may have to change this depending on how you have MongoDB set up on your computer (I am on a Mac, but I know that for Windows, it might be a slightly different syntax - or you may be using a username and password...just google it).

Have at it (and check out the cool forum that I built into the site)!

Upvotes: 0

Views: 197

Answers (1)

ewizard
ewizard

Reputation: 2862

Found the real culprit - oddly enough - it was just a float:left in the css for .header > h2 and .header > h3 - when I removed that it fixed everything - need to figure out a different way to reformat my header though :)

Upvotes: 1

Related Questions