I'm using Bootstrap 3 on my site and the mobile navigation causes horizontal scrolling. Take a look: http://www.fastfoodnutrition.org/ If you make your browser small enough to show the mobile menu, when you expand it you'll see the horizontal scrollbar. I can't for the life of me figure out what is causing this. Any help would be greatly appreciated. Code is below:
<nav class="navbar navbar-default navtop" role="navigation">
<div class="container-fluid">
<div style="width:100%;">
<div class="navbar-brand visible-xs">
<a title="Fast Food Nutrition" href="/">
<img alt="Fast Food Nutrition" src="/images/logo.png">
</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div style="clear:both;"></div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li> <a title="Fast Food Restaurants" href="/fast-food-restaurants.php">Restaurants</a>
</li>
<li> <a title="Fast Food Nutrition Meal Calculator" href="/fast-food-meal-calculator.php">Meal Calculator</a>
</li>
<li> <a title="Fast Food Nutrition Blog" href="/blog/">Blog</a>
</li>
<li> <a title="Nutrition Glossary" href="/glossary/">Glossary</a>
</li>
<li> <a title="Fast Food Nutrition Lesson Plans" href="/lesson-plans.php">Teachers</a>
</li>
<li> <a title="About FastFoodNutrition.org" href="/about-us.php">About</a>
</li>
<li class="hidden-sm visible-xs"> <a title="Search FastFoodNutrition.org" href="/gsearch.php">Search</a>
</li>
</ul>
<div class="hidden-xs">
<form action="http://www.fastfoodnutrition.org/gsearch.php" id="cse-search-box">
<div id="desktopsearch">
<input type="hidden" name="cx" value="partner-pub-8872439879453765:6542173620" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="20" />
</div>
</form>
</div>
</div>
</div>
</nav>
Its because of padding :0; at line 15 in ffnv4.css
And add a media query so that it does alters your big screen view above 768px.
#media (min-width: 768px) {
#bs-example-navbar-collapse-1 {
padding: 0 15px;
}
}
The correct answer is here, bootstrap uses negative margins for navbar-nav elements.
Related
Navbar how it should be:
I want the text idealize, develop, prototype and about to appear next to the icons only in the collapsable navbar. The text appears on larger viewport sizes, too, what I don't want:
HTML
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logo" href="#">
<img src="images/avezlogo.png">
</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="orange"><a href="#idealize">
<img src="images/bulb.png"><span class="collapse">idealize</span>
</a></li>
<li id="cyan"><a href="#develop">
<img src="images/laptop.png"><span class="tittle">develop</span>
</a></li>
<li id="purple"><a href="#prototype">
<img src="images/printer.png"><span class="tittle">prototype</span>
</a></li>
<li id="red" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#about">
<img src="images/dots.png" id="dots"><span class="tittle">about</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Sorry about any noob mistakes on my code. I'm new to Bootstrap and web design. Any help is appreciated. Thanks!
You can use display: none; inside of a media query to target and hide your images at the mobile breakpoint. See example.
#media (min-width: 768px) {
.navbar-inverse .navbar-nav li img {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logo" href="#">
<img src="images/avezlogo.png">
</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="orange">
<a href="#idealize">
<img src="images/bulb.png"><span class="collapse"> idealize</span>
</a>
</li>
<li id="cyan">
<a href="#develop">
<img src="images/laptop.png"><span class="tittle"> develop</span>
</a>
</li>
<li id="purple">
<a href="#prototype">
<img src="images/printer.png"><span class="tittle"> prototype</span>
</a>
</li>
<li id="red" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#about">
<img src="images/dots.png" id="dots"><span class="tittle"> about</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
That's how it should behave. Links should be seen in all viewport sizes. If you only want to see the links in the collapsable navbar and not in the not-collapsable navbar, you can do this:
#media (min-width: 768px) {
#myNavbar .navbar-right {
display: none;
}
But then you see in larger viewport sizes a blank navbar without a toggle icon on the right side. And that's not what you want, I think.
If you want a collapsable navbar all the time, the best solution would be to customize the Bootstrap CSS here:
Bootstrap customize grid
and set the #grid-float-breakpoint to a large width, e.g. 3000px. Download and compile and the CSS should do it.
the media query worked fine. Thanks a lot. I was also wondering. Why doesn't the dropdown menu in the first image close after clicking one of the links? I have to click the menu button again for it to close. How could I change this? Thanks again.
I want my search box to appear in the nav bar on the desktop and in mobile. Currently, when I reduce the width, the search bar drops to the next line. I can't figure out how to keep it flush with the nav bar.
Here's the code: http://plnkr.co/edit/Unr6MEiIkF6WpXwCCgkF?p=preview
I was able to accomplish the desired affect by inserting a second search box within the 'navbar-header' section, but that caused by typeahead code to go crazy.
Code
Here's the header section of my HTML:
<header>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="hidden-xs">
<a class="navbar-brand" href="/">Some Project</a>
</div>
<div class="visible-xs">
<a class="navbar-brand" href="/">P</a>
</div>
</div>
<div class="navigation">
<div class="pull-right" id="navbar-search-area">
<form class="navbar-form site-search" id="new_search" action="/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<div class="form-group">
<div class="icon-addon addon-sm">
<input id="search" placeholder="search" input-html="col-xs-5 col-sm-3 col-md-4" type="text" name="search[term]" />
<label class="glyphicon glyphicon-search" rel="tooltip" title="search"></label>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse header-collapse" id="navbar-section-1">
<ul class="nav navbar-nav">
<li>
Pick Me!
</li>
<li>
me me me me!
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
Any guidance would be appreciated.
References
Other people have had similar questions but they all seem a little different, in large part because there isn't a super-standard way to do this, and because people want their web pages to behave in different ways.
Aligning search bar for mobile with bootstrap 3
[update] updated css in plunkr to show that the nav bar stretches across the top in a different background color.
Pulling the search and collapsed navbar out of the header and right aligning them seems to do the trick
http://plnkr.co/edit/B4gIfAkNiwkBId9fbLVi?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<title>AngularJS Plunker</title>
<!-- your app.js file -->
<script src="app.js"></script>
<!-- bootstrap css -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<!-- your style.css file -->
<link href="style.css" rel="stylesheet" />
</head>
<body class="pages welcome">
<style>
body { background-color: #F9F7F5; }
</style>
<header>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<button class="pull-right navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="pull-right" id="navbar-search-area">
<form class="navbar-form site-search" id="new_search" action="/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<div class="form-group">
<div class="icon-addon addon-sm">
<input id="search" placeholder="search" input-html="col-xs-5 col-sm-3 col-md-4" type="text" name="search[term]" />
<label class="glyphicon glyphicon-search" rel="tooltip" title="search"></label>
</div>
</div>
</form>
</div>
<div class="container">
<div class="navbar-header">
<div class="hidden-xs">
<a class="navbar-brand" href="/">Some Project</a>
</div>
<div class="visible-xs">
<a class="navbar-brand" href="/">P</a>
</div>
</div>
<div class="navigation">
<div class="collapse navbar-collapse header-collapse" id="navbar-section-1">
<ul class="nav navbar-nav">
<li>
Pick Me!
</li>
<li>
me me me me!
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-2">
<h1 class="page-title">Welcome to the Project</h1>
<p>This is the body.</p>
</div>
</div>
</div>
</body>
</html>
Working everywhere else except iPads, view port also added:
<meta name="viewport" content="width=device-width, initial-scale=1">
Please help me find a solution, see my website.
Here is how the result is viewed on iPhone.
Here is how the result is viewed on iPad.
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="top">
<div class="container topmenu">
<ul class="nav nav-pills pull-right" style="margin-top: -1px;">
<li role="presentation">Login
</li>
<li role="presentation">Register
</li>
<li role="presentation">
<a href="https://www.facebook.com/pages/allvideolecturescom/320909451432640" class="soc">
<img src="http://allvideolectures.com/img/facebook_top.png" alt="" />
</a>
</li>
<li role="presentation">
<a href="https://twitter.com/videolecture" class="soc">
<img src="http://allvideolectures.com/img/twitter_top.png" alt="" />
</a>
</li>
<li role="presentation">
<a href="https:/google.com/+Allvideolectures" class="soc">
<img src="http://allvideolectures.com/img/google_top.png" alt="" />
</a>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="http://allvideolectures.com/">
<img src="http://allvideolectures.com/img/logo.png" alt="all video lectures let's learn" /><span class="logoleft">ALLVIDEO</span><span class="logoright">LECTURES.COM</span>
</a>
</div>
<div id="navbar" class="navbar-collapse collapse mainmenu">
<ul class="nav navbar-nav pull-right">
<li role="presentation">Home
</li>
<li role="presentation" class="active">Courses
</li>
<li role="presentation">Blog
</li>
<li role="presentation">About
</li>
<li role="presentation">Contact us
</li>
<li role="presentation">
<form method="get" action="http://allvideolectures.com/search/">
<input type="text" name="search" class="form-control" required placeholder="Start Learning...">
<input type="submit" value="" class="searchbtn1">
</form>
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</nav>
First you should read documentation of the framework you're using:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
Your code works well, but using default variable value.
If you want collapsed navbar (and other components maybe too) on 768px, you should override your variables.less file with a larger value, for example with #screen-md-min (992px):
#grid-float-breakpoint: #screen-md-min;
For more information about Bootstrap variables overriding see this question.
I keep getting the same issue when attacking the problem in the method offered on various sites.
Q.How can i set the nav to a z-index of 1000 to appear above all other elements in the site?
I have tried position: absolute & relative' within the fixed div.
I need the nav to be fixed, and expand as bootstrap does but i need the whole nav at any time to appear above anything else.
The nav
<div id='nav_container' class='fixed_nav'>
<div id='nav_div' class=''>
<nav id='navbarnav' class="navbar navbar-default admin_nav_bar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#"><img class='brand_image' src='assets/images/logo-1-small.png' alt='' /></a>
</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 pills">
<li class="active home-pill"><a href="#home" id='home_button'>Home</a></li>
<li class='vids-pill'>Vids</li>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right pills">
<!--
<li class='login_button'>
<a href='#signin' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Sign in</a>
</li>
<li class='register_button'>
<a href='#register' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Register</a>
</li>
-->
<li class="dropdown">
New <b class="caret"></b>
<ul class="dropdown-menu">
<li class="divider"></li>
<li>Video</li>
<li>Picture</li>
<li>Music</li>
<li class="divider"></li>
</ul>
</li>
<li class='user_button admin-pill'>
<a href='#admin' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Admin</a>
</li>
<li class='user_button myaccount-pill'>
<a href='#myaccount' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'><? echo $_SESSION['userName']; ?></a>
</li>
<li class='logout_button'>
<a href='http://www.xxxxxxx.co/home/bin/logout/logout.php' type="button" id='logout_button' class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Logout</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
The Body of which i wish to appear below but in chrome is appearing above the nav
<div class='container'>
<h3>
New Video
</h3>
<hr />
<div id='new_vid_form' class='' style='position: relative; z-index: 0;'>
<div class="input-group marg_5">
<span class="input-group-addon">Article Title</span>
<input id='new_vid_form_title' type="text" class="form-control" placeholder="Article Title">
<span class="input-group-addon">
<span id="new_vid_form_title_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<div class="input-group marg_5">
<span class="input-group-addon">Short Desc.</span>
<input id="new_vid_form_shortDesc_status" type="text" class="form-control" placeholder="Short Description">
<span class="input-group-addon">
<span id="new_vid_form_shortDesc_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<hr />
<div class="input-group marg_5">
<span class="input-group-addon">Youtube ID</span>
<input id="new_vid_form_youtubeID_status" type="text" class="form-control" placeholder="Youtube Video ID | watch?v=' this bit ' ">
<span class="input-group-addon">
<span id="new_vid_form_youtubeID_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<hr />
<textarea id="new_vid_form_longDesc" class="input-large text_area_fw" placeholder='Long Description'></textarea>
</input>
<hr />
<div class="input-group marg_5">
<span class="input-group-addon">Tags</span>
<input id="new_vid_form_tags" type="text" class="form-control" placeholder="Tags (No more than 10) seperated by comma">
<span class="input-group-addon">
<span id="new_vid_form_tags_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<hr />
<button class='btn btn-default'>Add video</button>
</div>
</div>
The associated CSS
.fixed_nav {
width: 100%;
position: fixed;
top:0;
}
#nav_div {
z-index: 10000;
}
I use the bootstrap Navbar with headroom.js to make it move up & down. I have to set the z-index in the css for the style i used .navbar-fixed-bottom, works for top as well this way , this achives fixed & the z-index, no need to create separate styles, yours are probabaly being overridden you can check in chrome dev tools, in your bootstrap css file look for and .navbar-fixed-top, .navbar-fixed-bottom, then add z-index: 1030; I can't imagine why I used 1030, just needs to be a big enuff to be more than the total amount of elements of the page whatever yours is.
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
HTML
<div class="navbar-fixed-bottom">
<ul>
<li>
...
</li>
</ul>
</div>
Possibly way off track, but in your HTML markup your navbar has the id nav_div, but your CSS selector is targeting #navdiv (no underscore)
I'm using twitter bootstrap 2.3 and when I make my browser smaller it collapses correctly but when I click on the button to do the dropdown it doesn't appear in front of the other items. Here is a working demo: http://www.thehighlightnetwork.com/ I've been trying to fix it in the developer tools in Chrome but to no avail.
Here is the relevant code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><img src="http://i.imgur.com/8dN9Ck1.png" alt="small logo" style="height:50px;"></a>
<div class="nav-collapse collapse" style="height:0px;">
<ul class="nav">
<li>The Highlight Network</li>
<li>Official Blog</li>
<li>Profile</li>
<li>Logout</li>
<li>Sign Up!</li>
<li>Upload</li>
</ul>
<ul class="nav pull-right">
<li>
<div class="center-it">
<form class="form-search" action="/search" method="GET" style="margin:0; margin-top:15px;">
<input type="text" name="search_tag" placeholder="search..." class="input-medium search-query pull-right">
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
In the official demo site it pushes down all the other elements which I would be happy with or if I can simply make it so that it is in front of the other elements.
The static position of your fixed navbar is causing this, the following css will override that and fix your problem (confirmed in chrome)
.navbar-fixed-top, .navbar-fixed-bottom {
position: relative !important;
}