col-xs-# for .navbar not working

[irfan]

<nav class="navbar navbar-default navbar-fixed-top col-xs-12">

<div class="container">

<div class="navbar-header">

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

<div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">Page 1</a></li>

When i shrink window, navbar comes horizontally covering the whole browser width. How to get ride of this?

[dsonesuk]

Errr Remove that HTML code OR use CSS display: none;Identify what screen size you wish it to change and apply appropriate styling.http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[Ingolme]

He's using a CSS framework called bootstrap which has media queries internally.

 

Bootstrap automatically stacks columns vertically when the window is small, this is done so that blocks don't become too thin on tiny screens. If you don't want that behavior then don't use the col-xs-12 class, set the width of the column yourself manually with CSS.