Responsive navbar breaks in some tablets - html

Question

I have designed the site and when I resize the browser window or use the tools Firefox provides for responsiveness, I don't see navigation bar breaking and I don't own a tablet but a few friends do and they say the navigation bar is not showing up correctly.
I don't understand what I am doing wrong!
This is the site
Edited:
The navigation bar li item should be floating right. Apple users say that when they open the site, it opens fine. But once they scroll down and back up, the li items do not line up on the right but come in between.

Answer 1

I think #khilley made a particularly valid point about using standard Bootstrap markup and built-in javascript components. Here's some reasons why:
Your current approach uses duplicative markup (for your menu). It's not DRY or accessible and it requires more effort to maintain.
If you don't need to write your own javascript, you save time in development and testing, and a couple of download bytes for your users.
Twitter Bootstrap is used on millions of websites, so it gets field tested by millions of people on millions of different device/OS/resolution combinations everyday around the world. When you use the standard markup and javascript component plugins, you get the benefit of knowing it's just going to work.
More to the point, you can easily reproduce all of the behaviors of your navigation, with just some styling, including using the built-in affix markup to handle the change in your navbar. Pretty sweet!
DEMO
There were only a few changes made to your markup and css to accomplish this. You can eliminate all of your custom javascript now except for the one click handler that you use for scrolling to your different sections.
Replace all of your navigation styles and markup with the following:
HTML:
<nav class="navbar nav-custom navbar-fixed-top" data-spy="affix" data-offset-top="80" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-th-list"></span>
</button>
<span class="rc">RC</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li>
Design
</li>
<li>
Develop
</li>
<li>
Contact
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.nav-custom {
width: 100%;
height: 80px;
z-index: 999;
padding: 25px;
background-color: #f87f73;
border-bottom: 1px solid rgba(0, 0, 0, 0.18);
font-size: 150%;
color: #fff;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.nav-custom.affix {
width: 100%;
background-color: rgba(255, 255, 255, 1);
color: #f87f73;
height: 60px;
padding: 14px;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.nav-custom .rc {
background-color: #fff;
color: #f87f73;
padding: 5px;
border-radius: 50% 0% 50% 0%;
float: none;
}
.nav-custom.affix .rc {
background-color: #f87f73;
color: #fff;
}
.nav-custom.affix .navbar-collapse {
top: 60px;
}
.nav>li>a:hover, .nav>li>a:focus {
background-color: transparent;
}
button{
outline: none;
}
.navbar-toggle {
padding: 0;
margin: 0;
}
#media (min-width: 768px) {
.nav-custom a::before,
.nav-custom a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.nav-custom a::before {
margin-right: 10px;
content: '[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.nav-custom a::after {
margin-left: 10px;
content: ']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.nav-custom a:hover::before,
.nav-custom a:hover::after,
.nav-custom a:focus::before,
.nav-custom a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}
.nav-custom a:link, .nav-custom a:visited, .nav-custom a:hover, .nav-custom a:active {
text-decoration: none;
color: #fff;
outline: none;
}
.nav-custom.affix a:link, .nav-custom.affix a:visited, .nav-custom.affix a:hover, .nav-custom.affix a:active {
text-decoration: none;
color: #f87f73;
outline: none;
}
}
#media (max-width: 767px) {
.navbar-collapse {
width: 250px;
position: fixed;
right: -250px;
top: 80px;
overflow-x: hidden;
background-color: rgba(255, 255, 255, 0.8);
border-top: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.navbar-collapse.in {
right: 0px;
width: 250px;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.navbar-collapse.collapsing {
height: auto !important;
}
.navbar-nav {
margin: 0 -15px;
}
.navbar-nav>li>a {
padding: 0;
line-height: 3em;
text-align: center;
}
.navbar-collapse ul {
border-left: 1px solid rgba(0, 0, 0, .18);
}
.navbar-collapse ul li {
border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.navbar-collapse ul li:hover {
background-color: #f87f73;
color: #fff;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.navbar-collapse ul a:link,
.navbar-collapse ul a:visited {
color: #f87f73;
}
.navbar ul a:hover {
text-decoration: none;
color: #fff;
}
}
How it works:
The navbar-fixed-top class is used instead of custom styles.
Instead of writing your own javascript to handle changing your navbar when you scroll, you can use Bootstrap Affix. This built-in javascript plugin can use the data-offset-top attribute to set the point at which the affix class is automatically appended to the element where the data-spy attribute is set. Using the data attributes, you don't need a single line of javascript, just add the styles for how you want your element to look once the affix class is applied. Now all of your styles are in your CSS and none need to be in your javascript.
Use the built in navbar-toggle, which uses the built in Bootstrap Collapse plugin to transition to and from the mobile navigation. This eliminates the need to write/test/maintain your own javascript and eliminates the duplicative markup you have for the menu. The collapse plugin applies the in class to the element with the collapse class when the menu is expanded, so you can just use this for styling your menu.
Use media queries to change the layout of the menu based on the viewport size. The "mobile" menu is only displayed at viewports less that 767px, so you can easily target how you want the mobile menu to be styled.
Overall, the CSS is virtually identical to your CSS, I just changed the selectors to reflect the changes in the markup. Aside from a few minor tweaks, it was pretty much cut and pasted from your site.

Answer 2

When the page opens your nav is insisde the HTML block
<div class="row nav-custom nav-custom"> ... </div>
And on scrolling the nav is inside the block
<div class="row nav-custom nav-custom-2"> ... </div>
In your stylesheet http://rohanchhabra.in/css/custom.css you have padding:25px; and padding:14px; for .nav-custom and .nav-custom-2 which breaks the Bootstrap grid because there isn't enough width to place your col-sm-3 and col-sm-9 columns without breaking the row into two lines.
You could either remove or edit the padding for these 2 classes so that you aren't adding any extra horizontal space e.g.
.nav-custom{
padding-top:15px;
padding-bottom:15px;
}
or place the nav-custom class inside your col class, e.g.
<div class="row">
<div class="col-xs-3 col-sm-3">
<div class="nav-custom"> ... </div>
</div>
...
</div>
The key thing here is that you never want to had horizontal padding to any of the bootstrap row or column elements or you risk breaking the Bootstrap grid
Good luck!

Answer 3

It's possible you've hit upon a Safari web browser bug, since this issue seems to only get recreated on Macs. I can recreate the issue on OSX 10.8, running Safari 6.1. A browser refresh, or clicking on any of the nav values clears the issue and resets the nav display to the desired position. You could look into filing a bug for this potential Safari display issue.
That being said, my suggestion to resolve this issue is to refactor your HTML to better leverage the core Bootstrap navigation components. Currently you've got the navigation split in different div containers, and have it separate for wide screen and mobile. A more standard Bootstrap navigation element would look like:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Static navbar -->
<nav class="navbar navbar-custom navbar-inverse navbar-fixed-top" role="navigation">
<div class="container" id="nav-container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href=""><img src="" class="Logo" alt="Rohan Chhabra Designer and Developer"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Design</li>
<li>Develop</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- End Static navbar -->
You'll of course need to add some amount of custom.css styling to this code example, and it assumes your logo is an image (so rework that accordingly), BUT I think that by using this more 'standard' navigation implementation of Bootstrap navigation you'll be in better shape in the long run. I've tested out Boostrap websites using this style navigation and they do not have the Safari display issue seen in your example.

Answer 4

I have validate your site with w3c validator.
There is some critical issues found need to be correct.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I recommend this line should come with IE conditional comments like below line.
<!-- [if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
And Anchor tag is not allowed as child of element ul
Please current those issues and check. It will definitely fix your site issues.

Answer 5

You may try using media queries for different window sizes..
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en.
This might be helpful for you.