Is it possible to center the collapse button, when the height of the navbar is unknown? I can do something like:
.navbar-toggler {
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
height: 40; /*something appropriate*/
}
Now the button is vertically aligned. However, when I open the menu (click on it), it will center on the text as well, which is something I don't want. Play around with it here:
https://codepen.io/anon/pen/ZKbJJV
I also want to make the logo float right when it's in "mobile view". Is that possible without using media queries perhaps?
I got it to work by wrapping the button and brand in a div like this:
<div class="d-flex align-items-center justify-content-between">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand ml-3" href="/en">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo" alt="logo">
</a>
</div>
Then I did some CSS on the button as well:
.navbar-toggler {
align-self: inherit;
position: initial;
}
And that's pretty much it. Solved both issues!
Related
I have the following HTML
<h2 class="border-center-right mt-4">
<span class="bg-white float-left">CREDITCARDNAME</span>
<button type="button" class="btn btn-primary float-right">APPLY NOW</button>
</h2>
I'm using Bootstrap 4. The border is currently overlapping the "Apply Now" button. How can I make it so the border sits behind the button?
THANKS!
I added the code to the following Fiddle: https://jsfiddle.net/katzumi/98c5q2cf/
And these are the border styles currently applied to <h2 class="border-center-right mt-4">:
You should be able to just remove float-left from your span.
I made the border red so it was easier to see against a white background.
<div class="container mb-5">
<h2 class="border-center-right mt-4" style="border-bottom: 1px solid red;">
<span class="d-inline-block bg-white">CREDITCARDNAME</span>
<button type="button" class="d-inline-block btn btn-primary float-right">APPLY NOW</button>
</h2>
<div class="text-4-col">
</div>
</div>
https://jsfiddle.net/98c5q2cf/2/
Fixed! I reduced the width of the element &::after the border-center-right class.
#include media-breakpoint-up(sm) {
.border-center-right {
position: relative;
overflow: hidden;
&::after {
content: "";
display: inline-block;
height: 1px;
position: absolute;
top: 50%;
transform: translateY(-50%);
**width: 50%;**
background: $accent-secondary;
margin-left: 1rem;
}
}
}
How to align vertically middle bootstrap alert dismiss button?
<div class="alert alert-dismissible alert-info" role="alert">
<div class="alert-message">
Multi<br>
Line<br>
Alert
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
Fiddle: https://jsfiddle.net/b5asr9xj/4/
div alert-message is there just because I'm using jQuery.html to update content in it...
You could wrap your text in <p></p> tags and then set text-align: center; on them.
Updated fiddle
Does this solve your problem?
If you want to align it. Vertically in the middle you can do something like this with your current html.
.alert-message {
text-align: center;
button{
display: inline-block;
}
within your alert-message class you align the text to the center and you can then make it display inline(vertical).
see Updated fiddle
You can do like this for vertically middle.
Add parent div to position: relative;
See demo link here. https://jsfiddle.net/rhwxm3md/1/
<div class="alert alert-dismissible alert-info" role="alert">
<div class="alert-message">
Multi<br>
Line<br>
Alert
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
CSS CODE:
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
If i look at the following bootstrap example:
http://getbootstrap.com/examples/navbar/
then there is some space between the jumbotron and the navbar.
I digged into the css of the example and if i disable this (2 times):
.navbar {
margin-bottom: 20px;
}
Then the space in between disappears.
When i try to do this myself the margin-bottom has no effect.
Why is that? And how do i fix it?
(I did a search but I only find people wanting to remove the gap that I don't have...).
<div class="container">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">FOOBAR</a>
</div>
</div> <!-- /.container-fluid -->
</div>
<div class="jumbotron">
<h1>Test</h1>
</div>
</div>
http://jsfiddle.net/6Qp9v/
It looks like you need to add your desired margin to the top of the .jumbotron because the .navbar is fixed position to the top of the page - so it has no relation in the flow to the .jumbotron.
Just add some padding top for the body.
body{
padding-top: 70px;
}
Hope this answer solved your problem.
.jumbotron {
margin-top: 70px;
}
This should work! (To get your desired 20px gap, you need to put 70px here as the navbar takes almost 50px from the top. As the navbar is fixed, margin-top will not work with reference to navbar, rather it will work with respect to the top of the page).
You can also try the following code:
body {
padding-top: 70px;
}
It will also work!
I am using bootstrap navbar-fixed-top and have set to always be collapsed.
I would like the color of the drop down to be a different colour to that of the main navbar, a bit like the nag on this site: http://wearehanno.com/
Any ideas on how to achieve this?
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<?php
if (has_nav_menu('primary_navigation')) :
wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
endif;
?>
</nav>
</div>
.navbar-brand {
display: block;
background: url(../img/logo.svg) no-repeat;
text-indent: -9999px;
height: 54px;
width:216px;
margin-top:10px;
background-position:center;
}
.navbar-collapse { background:#333333; }
#grid-float-breakpoint: 9999px;
Add the following rule to your CSS.
.navbar-collapse { background:#cccccc; /*replace with desired color*/ }
To make the background full-width on larger screens, add:
#media(min-width: 768px){
.navbar > .container { max-width: 100%; padding: 0; }
}
Demo
I have the exact opposite problem and need my navigation to move the target up where it normally would be. Anybody ready to take on a tougher fragment identifier navbar challenge please see stackoverflow: http://bit.ly/1avVcwf
While I was trying to solve my problem I started using divs to move the results of targets up and down the page as divs are block elements by default and I wrote the div immediately before the intended fragment identifier target like this:
.bottom-margin-spacer{
margin-bottom: 1rem;
}
<div class=bottom-margin-spacer> </div>
<div id="fragment-identifier-target-1>lorum ipsum</div>
<div class=bottom-margin-spacer> </div>
<div id="fragment-identifier-target-2>lorum ipsum</div>
As I recall I was successful to keep targets "pushed" down but I am still not successful to have the targets positioned at the top of the page. So I only mention my own problem because I learned how to solve the question being asked by Brandon and offer my solution as one of several which can reposition the target downwards.
As for the question about how to extend the dropdown menu of a navbar that is answered here at stackoverflow. I saw it yesterday and so can anybody else by learning to use search using [bootstrap] tag and string literals like "navbar" and "dropdown menu"
If you think this is a good answer please mark as an answer
I'd like to display a telephone number that appears on the navbar next to the navbar toggle button. The toggle button only appears once the navbar is in the collapsed state. I'd like the text to appear next to it.
Here's what I have now:
And here's what I am trying to achieve:
HTML from the relevant divs:
<div class="header-centered"><img src="http://placehold.it/350x150"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
</div>
</div>
I don't want the text to appear unless the navbar is collapsed. How can this be achieved?
You can control the visibility of your text by CSS, something like this:
.abcde .text {
display: none;
}
.abcde.collapse .text {
display: inline-block;
}
Easy - just add the following HTML right before the 'hamburger button'
<p class="navbar-text visible-xs-inline-block">Menu</p>
Then style it to suit.
p.navbar-text {
font-size: 22px;
margin-top: 8px;
padding-bottom: 0;
text-align: right;
width: 70%;
}
There are too many ways to handle this situation.
Display: none; It's a browser friendly, they no more assume any element because its in permanently hidden state.
Visibility: hidden; it can hide any element on your document but still it has a limitation, browsers'll have to find that element on the page and then they hide that element. So for a few of few milliseconds but they have to work a bit to hide this.
By keeping font-size: 0; and after collapsing state use font-size: 1em;.
Keep opacity: 0 and later on opacity: 1.
postion: absolute; left:-99999em; and and later left:0;
You can use z-index if you have positioned element. Stacking the element in order also works.
So, finally there are a whole bunch of methods to hide and show elements on your document. It all depends on you whatever you choose.
But according to me Display: none; is the best one for your project.
I'm adding this answer for users that want to use bootstrap way of handling collapsing element using the grid-float-breakpoint , that is the point at which the navbar becomes uncollapsed.
So if you want elements that is visible only when the bar is collapsed add the collapsed-addon class and include this css.
The default gird-float-breakpoint value is setted to screen-sm-min that is 768px
#media (min-width: 768px){
.collapsed-addon {
display: none;
}
If you are using some processors use the css variable grid-float-breakpoint
#media (min-width: $grid-float-breakpoint){
.collapsed-addon {
display: none;
}
}
I searched for the answer and this is what I did - replace Menu with your desired text
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar btn-block" data-target=".navbar-inverse-collapse" data-toggle="collapse">
<span class="icon icon-white icon-align-justify"></span>
MENU</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">