I'm creating a website using Bootstrap and I want to have a floating footer bar for choosing a language, Q&As etc.
But I would like to have a 'hide' button there.
It looks like this:
<div id="footer" class="navbar navbar-default navbar-fixed-bottom">
<div id="innerFooter" class="container-fluid">
<div class="collapse navbar-collapse">
<div class="col-xs-6">
<a class="btn btn-default " data-toggle="collapse" href="#footer" aria-expanded="true" aria-controls="footer">
Hide
</a>
</div>
<div class="col-xs-6">
...some buttons..
</div>
</div>
</div>
</div>
I have two problems with it:
When I hide the bar and I go to another page, that bar pops up
again.
When I click the hide button the first attempt doesn't do
anything, but when I click for the second time, the bar hides.
Thank you for your help!
For the first problem:
You have to store the state of the navbar visibility...
If you don't code it, how the browser could know if it should show or not the navbar... ?
For the second problem
You want to collapse but there is no initial state.
You should had collapse in classes to your navbar
Bootply : http://www.bootply.com/p1xNGxePan
HTML :
<div id="footer" class="navbar navbar-default navbar-fixed-bottom collapse in">
<div id="innerFooter" class="container-fluid">
<div class="collapse navbar-collapse">
<div class="col-xs-6">
<a class="btn btn-default" data-toggle="collapse" href="#footer" aria-expanded="true" aria-controls="footer">
Hide
</a>
</div>
<div class="col-xs-6">
...some buttons..
</div>
</div>
</div>
</div>
Related
Its all in the title. Basically, I'm working with the first example from this Bootstrap page. There is no example on this page that shows how to collapse other elements when you click and expand a different element. I basically want this to work similarly to an accordion, when you click on another element, the one you had open is hidden (closing it), and the one you clicked on expands. Please help me with this I'm really trying to figure this out, but I'm struggling. Here's some demo code from Bootstrap 5. How would I get this so these are two unique elements with unique content, and when you click on one, it expands, and the other one that's open closes. Thank you so much for your help - Demo Code Below - the link to this example is attached above. These both buttons have unique content, but they can both be opened at the same time - I don't want this, I want only so one opens at a time, and the other closes on click. Thanks - Any solution is appreciated
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
Wrap your collapse in one div with id. And use data-target attribute with parent id.
<div id="abc">
<p>
<a
class="btn btn-primary"
data-bs-toggle="collapse"
href="#multiCollapseExample1"
role="button"
aria-expanded="false"
aria-controls="multiCollapseExample1"
>Toggle first element</a
>
<button
class="btn btn-primary"
type="button"
data-bs-toggle="collapse"
data-bs-target="#multiCollapseExample2"
aria-expanded="false"
aria-controls="multiCollapseExample2"
>
Toggle second element
</button>
</p>
<div class="row">
<div class="col">
<div
class="collapse multi-collapse"
id="multiCollapseExample1"
data-bs-parent="#abc"
>
<div class="card card-body">
Some placeholder content for the first collapse component of this
multi-collapse example. This panel is hidden by default but
revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div
class="collapse multi-collapse"
id="multiCollapseExample2"
data-bs-parent="#abc"
>
<div class="card card-body">
Some placeholder content for the second collapse component of this
multi-collapse example. This panel is hidden by default but
revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
</div>
I'm using the Bootstrap 4 theme and I've added a jQuery autocomplete search box to it. The problem I'm having though is the top of the suggest box is showing up behind the nav bar. How can I pull this to forefront? Here's the a working example of the problem: https://jsfiddle.net/phenkels/dwhzdg7b/11/. And a snippet of the HTML code:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="/">DASHBOARD</a>
</div>
<!-- Start Search Bar -->
<div class="ui-widget nav navbar-nav" id="search-wrapper">
<div class="input-group ">
<input id="tags" placeholder="Search..." autocomplete=off>
</div>
</div>
<!-- End Search Bar -->
</nav>
</body>
Adding this CSS will increase the z-index:
#ui-id-1 {z-index: 9999;}
Fiddle: https://jsfiddle.net/7z7Lj6pw/
Preview
I have the below menu + toggle button works great on any browsers on Android but iOS....
I can click on the button then the menu will show up & hide right away after showing.
I used a lot of work-around & fix, disable touchstart in bootstrap.js or changing z-index of navbar. . . but it won't help me anyway with this problem.
The menu seems to show up after click the toggle button but I can't see anything. I have to touch the toggle button again as closing the menu & touch again to open the menu again.
You guy can have a check if you have iPhone at http://getheadsup.com/
Thank you for your concern about my problem.
<div id="header-wrapper" class="header fadeIn">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid row">
<div class="navbar-header">
<a class="navbar-brand" href="index.html#top"></a>
</div>
<div class="navbar-footer">
<a href='order.php' class='navbar-preorder'>PRE ORDER</a>
<!-- hamburger icon -->
<button type="button" class="navbar-toggle collapsed menu-btn">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<!-- <span class="icon-bar middle-bar"></span>-->
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="collapse navbar-collapse main-menu">
<ul class="nav navbar-nav">
<li>
Alexa</li>
<li>
Technology</li>
<li id="spin">
Tech Specs</li>
<li>
FAQ</li>
<li>
Blog</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Take a look at
<div class="collapse navbar-collapse main-menu">
The size is almost nothing, height = 1px.
Since it contains the menu, nothing get displayed.
I don't know what CSS is going in there, but to see it working just set it to overflow: visible
Thats probably a workaround as it might cause issues elsewhere.
To solve it the right way the container need to have its children participating in the layout flow (e.g: not doing position:absolute or float: right/left).
the problem seems to be in the container (div.main-menu). it's positioned as fixed with no height or width.
try to add height and width to it.
#header-wrapper .navbar .container-fluid .navbar-collapse {
height: 100%;
width: 100%;
}
this worked for me.
I had the same issue in iOS and fixed it by changing the button class collapsed to the following jQuery code:
$('your_section_class').toggleClass('collapse')
I am trying to implement Angular js + Bootstrap3 for mobile.
I have added navbar (navbar-fixed-top) in index.html file and there are some forms getting loaded through partials/myfom.html.
When I scroll the page and if a textbox is just behind the navbar, on click of navbar it opens keypad for textbox on mobile.
Can anyone please help me to suppress events of any controll which goes behind navbar after scrolling ?
Code -------
<snap-drawers>
<div snap-drawer="right">
<!-- some content -->
</div>
</snap-drawers>
<snap-content>
<div id="main-mobile-frame">
<div class="app">
<!-- Navbars -->
<nav class="navbar navbar-default navbar-fixed-top my-top-bar" role="navigation">
<span class="head-title">Welcome</span>
<div class="bg-reg-shadow btn-group pull-left top-menu-buttons">
<div class="btn btn-navbar sidebar-toggle" id="menu_bars_id" snap-toggle>
<i class="glyphicon glyphicon-align-justify"></i>
</div>
</div>
<div class="bg-reg-shadow btn-group pull-right top-menu-buttons" yield-to="navbarAction">
<div snap-toggle="right" class="btn btn-navbar" id="right_plus_id">
<i class="glyphicon glyphicon-plus"></i>
</div>
</div>
</nav>
<div class="app-body scrollable">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
</div>
<ng-view ></ng-view>
</div>
</snap-content>
You have to add a style="margin-top: XXpx;" style to the app-body the same height or more as the nav-bar, however that means you need to explicitly define your nav-bar height - I have not yet discovered a way to make this responsive.
I have the following code (full source of page):
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a 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>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<span class="brand" href="#">Test</span>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="{% active request "^/$" %}">Home</li>
<li class="{% active request "^/about$" %}">About</li>
</ul>
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search...">
</form>
<div class="navbar-form pull-right">
Log in
Sign up
</div>
</div>
</div>
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
When loaded as a desktop, I get this:
Note that the "Log in" and "Sign up" buttons are BEFORE the search bar.
However, when I resize the browser, and the navbar responds I get this:
Now, the "Log in" and "Sign up" buttons are AFTER the search bar. This is because they are pull-right elements.
I've tried wrapping the buttons and search bar in a float: right parent div. This causes them to stay in the right order, but results in them being weirdly off to the side. This is undesirable. Does anyone have a solution that causes their order not to be reversed?
The problem is that the floats on navbar-form and navbar-search are set to none once the nav-collapse logic kicks in. Instead of relying on floats, play around with display: inline-block. The following seems to work reasonably (you should create your own classes instead of applying styles inline):
<div class="pull-right">
<!-- .btn's already have display: inline-block so don't need to apply it manually -->
<!-- margin-left: 15px is applied so that the buttons align with the
search field -->
<a style="margin-left: 15px;" href="#" class="btn">Log in</a>
Sign up
<form class="navbar-form" style="display:inline-block">
<input type="text" class="search-query" placeholder="Search...">
</form>
</div>
Navbar's no longer use .pull-left or .pull-right, but rather .navbar-left and .navbar-right. This avoids issues with specificity due to chaining classes and enables easier styling.
See http://blog.getbootstrap.com/2013/08/13/bootstrap-3-rc2/