I have used the sticky footer in Bootstrap .. An example of which is
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site built by this</p>
<a class="navar-btn btn-danger btn pull-right">Subscribe on Youtube</a>
</div>
</div>
But I want to use the normal footer.. So that I can only see that when I scroll to the bottom and not always.. How can I do that with the existing code in Bootstrap?
Thanks
Use navbar-static-bottom and a container-fluid inside like this..
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<p class="navbar-text pull-left">Site built by this</p>
<a class="navar-btn btn-danger btn pull-right">Subscribe on Youtube</a>
</div>
</div>
http://www.bootply.com/sa1xW9fyTW
Related
I am working on a top banner with Bootstrap and my condensed menu always is wrapping to a new line for 1024x768. This is working well for resolution greater than 1024x768. Please advise in correcting my html so that the banner stays fixed on the top for 1024x768 resolution.
The banner text has to be centered, the logo should be on the left and logged in user name should be on the right.
.headerBackGroundColor {
background-color: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
<div class="logo">
<a href="">
<img src="https://via.placeholder.com/100" alt="Title" />
</a>
</div>
<div class="navbar-header navbar-brand">
Application Title on Banner Goes Here
</div>
<div class="navbar-nav nav navbar-right">
<button class="btn btn-default" type="button" style="cursor:default !important;">
<span class="user-name">
Welcome loggedInUser
</span>
</button>
</div>
</div>
Does this look good to you?
.headerBackGroundColor {
background-color: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
<div class="container">
<div class="row w-100 justify-content-md-around row-cols-3">
<div class="col-lg-auto">
<div class="logo">
<a href="">
<img src="https://via.placeholder.com/100" alt="Title" />
</a>
</div>
</div>
<div class="col-lg-auto d-flex align-items-center">
<div>Application Title on Banner Goes Here</div>
</div>
<div class="col-lg-auto d-flex align-items-center">
<div class="navbar-nav nav navbar-right">
<buttonclass="btn btn-default" type="button" style="cursor:default !important;">
<span class="user-name"> Welcome loggedInUser </span>
</button>
</div>
</div>
</div>
</div>
</div>
I'm working on making a site, and im currently dealing with BS4.1.3
I'm still new to this world so i have this issue right now:
<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-4">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
</a>
</div>
<div class="col-md-4">
Test
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
But the end result it's like this
While i wanted that the first blue button and the "logo" (B) were aligned, "test" a lot more in the right part of the navbar
Also the bottom search bar should be the same width as the container, so full lenght
<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-8 pull-right">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
<span>Test</span>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
.collapse input{
width:100%;
}
I am on mobile Stack Overflow app hence not able to test this.
In Bootstap 4, to put the test at the right of the navbar you can try,
<ul class="navbar-nav ml-auto">The content which goes to right comes here as a li</ul>
Also for aligning the blue button (The button you are using here is called as hamburger, remember that) can be aligned by using some margin-top for it.
Just use a CSS selector to select the hamburger and give some margin-top property to it.
Please consider adding a codepen so that we mobile users can play around with your code.
My main goal is to create a btn that play/pause the song on my wedding site.
I got it to work on the desktop view port, but not on the phone.
Notice the play btn on the far right, when clicking on it, it will play the song, the icon will toggle to pause, like this
So far so good, everything work perfectly fine.
Here come the issue, here what it look like on the 400px
I see it, but, they're not clickable at all.
I tried to inspect it, this is what I see.
I was thinking that I had the issue with z-index, I've tried to give one to my btn, but it still doesn't work.
I'm a little stuck now, please feel free to give me any suggestions.
HTML
<!--Header start -->
<header>
<!--menu start-->
<div class="menu">
<div class="navbar-wrapper" id="navbar">
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music">
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
</div>
{{-- Music --}} -------------------------------------------------
<div class="container">
<!--Logo -->
<div class="logo">
<img id="logo" src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="logo_phone hidden">
<img src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="navwrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navArea">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="navigation">
<li class="menuItem" id="home">Home</li>
<li class="menuItem">Count Down</li>
<li class="menuItem">Couple</li>
<li class="menuItem">Events</li>
<li class="menuItem">Gallery</li>
<li class="menuItem">Accommodation</li>
<li class="menuItem">RSVP</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Navbar -->
</div>
</div>
</div>
<!--menu end-->
<!--video header start-->
<div class="banner row" id="banner">
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 noPadd slides-container" style="height:100%">
<!--background slide show start-->
<div class="slide into_firefly">
<!--header text1 start-->
<div class="container hedaer-inner ">
<div class=" bannerText clearfix ">
<h1>Long & Roth</h1>
<h4>WE ARE GETTING MARRIED</h4>
<p class="ruler"><span></span>
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
<span></span></p>
<h4 class="date long">July 26th, 2016</h4>
<h4 class="date short">-07.26.2016-</h4>
</div>
<p class="downArrow"><i class="fa fa-chevron-down"></i></p>
</div>
<!--header text end-->
<img src="/img/love/main/edit/retina.jpg" alt="Main Image">
</div>
<!--background slide show end-->
</div>
</div>
<!--banner end-->
</header>
<!--Header end -->
Remove the part where you have set the logo to z-index: 9999
Then add this to your css
.navbar-header button{
float:right;
}
It is a z-index issue, but z-index is tricky and only works when the elements have a position other than static (which is default).
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music" style="position:relative; z-index:99">
...
</div>
{{-- Music --}} -------------------------------------------------
<div class="container" style="position:relative; z-index:98">
...
</div>
(I put the styling inline for clarity)
There are likely other way to fix this, but this was the quickest.
Pull the button outside of .navbar-wrapper and put it as the first element under .menu
That'll work :)
I have a little problem when i try to minimize the page and make it small
all is well except that the navbar control moves up and i don't understand where is the problem
Here is the code and it is the same in several tutorial :
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<p class="navbar-text pull-left">
Site Realiser par Hoffmannew
</p>
<a href="http://youtube.com" class="navbar-btn btn-danger btn pull-right" >Suiver Nous sur Youtube</a>
</div>
</div>
</div>
and also the screenshot :
I am using Bootstrap + Bootstro but can't make the top navbar to get behind the overlay.
http://jsfiddle.net/NJsYw/5/ (click on Tutorial)
<div id="wrap">
<!-- Fixed navbar -->
<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="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#" id='tutorial'>Tutorial</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
</div>
<p class="lead bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='0'>Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p class="bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='1'>Back to the sticky footer minus the navbar.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
Looks like this was address here https://github.com/clu3/bootstro.js/issues/15 but I didn't know how to apply (if it is necessary)
Thanks
This can be done using CSS the key is z-index which specifies the stack order of an element.
The bootstrap navbar has a z-index of 1030 so in order for the bootstro backdrop to cover the navbar you need to adjust the z-index to be higher than 1030.
e.g.
.bootstro-backdrop
{
....
z-index: 2000;
}
You also need to make sure that the bootstrap popover is not covered so you need to increase its z-index to be higher than 2000.
.popover {
z-index:2001;
}
FIDDLE