PreNav (Bootstrap3) won't drop down in mobile view - html

I can't figure out exactly why my preNav won't drop down in mobile view. I think it might have something to do with the bootstrap.css, but I was hoping someone had some more insight on the issue. I currently have 2 'navbar navbar-fixed-top' horizontal navs on the top of my page. In mobile view, it looks like this:
and the 2nd nav (in white) drops down just fine, but clicking the top nav drop down (in black) has no reaction. Is this due to bootstrap.css? Any ideas would be helpful.Here is my CSS for each nav if it helps:
#nav1 {
position: relative;
top:0;
}
#nav2 {
position: relative;
border-bottom:none;
}
and HTML for topNav (Nav1):
<div class="container-full">
<div class="row">
<div class="navbar navbar-inverse navbar-fixed-top" id="nav1" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>
<div class="col-sm-3 col-sm-3 pull-left">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">GO</button>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse navbar-collapse" id="pre-nav">
<ul class="nav navbar-nav" id="pre-nav-menu">
<li>Current Students</li>
<li>Staff</li>
<li>Employers</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<span id="phone">1.877.655.7676</span>
<input type="button" value="Request Info" class="btn btn-default pull-right" id="rinfoBtn" data-toggle="collapse" data-target=".navbar-collapse"/>
</ul>
</div>
</div>

It was indeed my data-target as vanburen pointed out. Instead of data-target=".navbar-ex1-collapse" I needed data-target=".navbar-collapse" , removing the 'ex1-' which must have been left in there as "example 1" from the original megaMenu source I pulled. Thanks vanburen!

Related

Change the position of a button to up

I have a header with a logo a dropdown menu and a search bar the problem is that dropdown button it's down and I want it to up.
I have this way:
But I want something like this where button is align with the logo and search bar:
I have tried a lot of things like call the class of button in css and put margin-button with a lot of pxls but its work, any suggestion?
This is my code HTMl where I have the button:
<header>
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<a class="navbar-left" href="#"><img src="assets/img/logo-01.png" style="max-width:70px"/></a>
<div class="navbar-header navbar-left">
<button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<div class="cd-dropdown-wrapper">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle cd-dropdown-trigger">Categorias</button>
<nav class="cd-dropdown">
Close
<ul class="cd-dropdown-content">
<li class="has-children">
Eletrodomésticos
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back">Menu</li>
<li class="see-all">Todos os eletrodomésticos</li>
<li class="has-children">
Eletrodomésticos
<ul class="is-hidden">
<li class="go-back">Eletrodomésticos</li>
<li class="see-all">Todos os eletrodomésticos</li>
<!--<li class="has-children">-->
<li>Grandes Eletro de cozinha</li>
....<!--(has other categories but it doesnt matter for here so I skip that part)-->
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Pesquisar Produto">
</div>
<button type="submit" class="btn btn-danger">
<i class="glyphicon glyphicon-search"></i>
</button>
</form>
</div>
</div>
</div>
</nav>
</header>
This is my css code:
.btn-default {
margin-bottom: 350px;
background: #25727D;
border-color: #25727D;
position: absolute;
margin-left: 50px;
}
.btn-default {
margin-bottom:350px;
background: #25727D;
border-color: #25727D;
position:absolute;
margin-left:50px;
}
Since .btn-default already have position:absolute, just change top:10px or top:desiredValue accordingly to change vertical position of button.

Bootstrap search field with icon in navigation header not appearing correctly

I'm attempting to add a search box with a header to my Bootstrap 3 template. The template that I'm using was purchased from the Bootstrap themes page and is the Light UI Dashboard theme.
I found this answer on Stack Overflow but it's not appearing correctly (it appears incorrectly in both Chrome and Edge).
How to add a search box with icon to the navbar in Bootstrap 3?
I modified my code to include the search box in my header however the glyphicon doesn't display and the search box is out of alignment. Here is a screen shot.
My code is as follows:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
<form runat="server">
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="/">Crown Ent.</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li role="presentation" id="dashboard">Dashboard</li>
<li role="presentation" id="workorders">Work Orders</li>
<li role="presentation" id="invoices">Invoices</li>
<li role="presentation" id="accounts">Accounts</li>
<li role="presentation" id="people">People</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/admin">Settings</a></li>
<li><a runat="server" href="~/admin">Help</a></li>
</ul>
<form class="navbar-form" style="padding-top:5px;">
<div class="form-group" style="display:inline;margin-top:5px;">
<div class="input-group" style="display:table;">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<input class="form-control" name="search" placeholder="Search Here" id="crown-search" autocomplete="off" autofocus="autofocus" type="text">
</div>
</div>
</form>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
I can't see anything wrong with the code. Adjusting the CSS margin in an attempt to fix the positioning is also ineffective.
UPD. I removed the first line <form runat="server"> and used the code
<form class="navbar-form" role="search">
<div class="form-group">
<div class="input-group">
instead of
<form class="navbar-form" style="padding-top:5px;">
<div class="form-group" style="display:inline;margin-top:5px;">
<div class="input-group" style="display:table;">
And I've added some CSS to make the form wider. Please check the result.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#navbar .navbar-form {
overflow: hidden;
}
#navbar .form-group,
#navbar .input-group {
width: 100%;
}
#navbar .input-group-addon {
width: 39px;
}
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="/">Crown Ent.</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li role="presentation" id="dashboard">Dashboard</li>
<li role="presentation" id="workorders">Work Orders</li>
<li role="presentation" id="invoices">Invoices</li>
<li role="presentation" id="accounts">Accounts</li>
<li role="presentation" id="people">People</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/admin">Settings</a></li>
<li><a runat="server" href="~/admin">Help</a></li>
</ul>
<form class="navbar-form" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<input class="form-control" name="search" placeholder="Search Here" id="crown-search" autocomplete="off" autofocus="autofocus" type="text">
</div>
</div>
</form>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
All you have to do is add the span that holds the search icon after the input field if you want it to be on the other side
So
<div class="input-group" style="display:table;">
<input class="form-control" name="search" placeholder="Search Here" id="crown-search" autocomplete="off" autofocus="autofocus" type="text">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div>
Also just looks like you need to apply a margin-top value to the input-group class feel free to add another class called search or something to apply it too as well
This seems like a simple css fix
FYI the glyph icon appears in all 3 of my browsers (Chrome, FF, and IE)
in order to fix out of alignment problem change this:
<div class="form-group" style="display:inline;margin-top:5px;">
to this:
<div style="margin-top:5px;">

Div hidden (under) bootstrap navbar

I use bootstrap 3 to design my website. I defined a navbar-fixed-top.
I needed to define a div fixed top superposed on the navbar for a search form.
I used z-index (=16777271 to be sure) to put the search div over the navbar.
It works well on my Firefox browser (with any width) but when i try it on my phone, the search div doesn't appear.
Here are some parts of my code :
NavBar :
<div class="navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#navbar-rt-collapse">
<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="/toto/"><img src="/toto/img/logo.png" alt="toto" style="max-width:120px; margin-top: -15px;" /></a>
</div>
<div class="navbar-collapse collapse navbar-right" id="navbar-rt-collapse">
<ul class="nav navbar-nav">
<li><i class="fa fa-history"></i></li>
<li><i class="fa fa-user"></i></li>
</ul>
</div>
HTML for search div :
<div class="fixed-search">
<input name="query" value="" id="query" class="form-control" placeholder="Find ..." autocomplete="on" maxlength="255" type="text"/>
CSS for search div :
.fixed-search {
position: fixed;
z-index:16777271 !important;
top: 8px;
height: 35px;
}
.fixed-search-btn {
position: fixed;
z-index:16777270 !important;
top: 8px;
height: 35px;
}
I search for a solution on Google but I didn't find any discussion about this problem.
If someone have a solution to solve this problem or can explain from where it come, I am very interested.
Thank you, Best regards,
Raphael
Here is what I have achieved.
For this just replace your navbar markup along with the input with the code I provided below and also importantly remove your styles you have explicitly applied for fixed-search & fixed-search-btn. All these are unwanted codes. Just replace the navbar code with the below code, bootstrap & font-awesome will take care of the rest across all browsers.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/toto/"><img src="/toto/img/logo.png" alt="toto" style="max-width:120px; margin-top: -15px;" /></a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group fixed-search">
<input name="query" value="" id="query" class="form-control" placeholder="Find ..." autocomplete="on" maxlength="255" type="text"/>
</div>
<button type="submit" class="btn btn-default fixed-search-btn">Search</button>
</form>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-history"></i></li>
<li><i class="fa fa-user"></i></li>
</ul>
</div>
</div>
</nav>
I found a way to do what I wanted. I defined the problem differently : I want to put the search query in the fixed navbar, out of the sidebar. So my real question was : Can i put an input out of the form ? The answer is Yes. You can define the properties of your input equal to the form id. That's all and it works very well.
Thanks for help anyway !

Aligning search bar for mobile and desktop with bootstrap 3.3

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>

Twitter Bootstrap Collapsing Menu not in front of other elements

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;
}