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!
Related
In my angular 7 application, we are using bootstrap 4 for our styling. When this modal opens, the text inside of it spills outside of the box, how can I modify the css so that the content is responsive and stays within the modal?
I am debugging someone else's code, so it is difficult for me to figure out exactly how they've set this up.
Here is the modal element that they are using, it is actually set up as an aside element:
<aside class="modal fade model-demographic" tabindex="-1" id="name-information" role="dialog" aria-labelledby="System Warning" aria-hidden="true">
<div class="demographic-name-dob modal-dialog modal-dialog-centered modal-lg blue" role="document">
<div class="modal-content modal-info-content">
<div class="modal-header model-info-header">
<h5 class="modal-title"><b>Name</b></h5>
</div>
<div class="modal-body d-flex justify-content">
<div class="row">
<h4 class="col-12">To make any changes to your first name, middle initial or last name, please contact us.</h4>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary close-modal" aria-label="cancel">Close</button>
</div>
</div>
</div>
</aside>
From some debugging, I believe this is the css class they are using that is causing the problem:
.modal-info-content {
width: 55%;
height: 35%;
margin: 0px auto;
position: fixed;
top: 50px;
right: 50px;
bottom: 50px;
left: 50px;
}
I'm assuming it has to do with position: fixed but am not sure how to change this so that it is responsive in mobile view.
I would start by removing the unnecessary code. This should eliminate the unexpected behavior.
.d-flex and .justify-content are unnecessary at this point. If they're required, I would recommend applying them to a child element of the .modal-body, below your h4 header.
Also, inside the .modal-body you can remove the div.row around the h4 and and remove the .col-12 class. These are both unnecessary because h4 tag already spans the entire row.
Your .modal-body node would then look like:
<div class="modal-body">
<h4>
To make any changes to your first name, middle initial or last name, please contact us.
</h4>
<div class="d-flex justify-content">
...
</div>
</div>
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!
I'm using bootstrap 3.0 and working on a mobile site. I'm trying to figure out how to show and activate navbar-toggle on viewing tablet devices (Small / SM Device) because the navbar-collapse only works at Extra small devices . There is no problem while using bootstrap 2
heres my code
<nav class="navbar navbar-inverse navbar-default-top" role="navigation" style="border:0px; background:#F26522;" align="center">
<div class="col-lg-3 col-md-3 col-sm-12" style="background-color:#fff; height:192px;" align="center" >
<div class="hidden-xs hidden-sm"></div><img src="logo_png.png" class="img-responsive" ></td>
</div>
<div class="col-lg-9 col-md-9 col-sm-12"">
<div class="row">
<div class="col-lg-11 col-md-11 col-sm-12">
<button type="button" class="navbar-toggle pull-left hidden-md hidden-lg" 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 class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-left navr">
<li class="navrli">ABOUT </li>
</ul>
</div>
</div>
<div class="col-lg-1 col-md-1 hidden-sm" align="right">
</div>
</div>
</div>
<!-- /.navbar-collapse -->
<!-- /.container -->
</nav>
By default, the breakpoint is #screen-sm-min (ie ≥768px).
View an Example
Customize the navbar breakpoint
To customize the navbar breakpoint, change the less variable #grid-float-breakpoint.
From the documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
...
c. Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
You can use Bootstrap's customization tool to build a modified version of Bootstrap. From here, you can alter #grid-float-breakpoint to another breakpoint defined by Bootstrap (ie, xs, sm, md, lg) or a set amount (ie 500px).
When you're finished, navigate to the Download section, and click Compile and Download
Edit
Your markup works as expected, as well: http://jsbin.com/kuxah/1/edit?html,output
here is the solution for sassy people
#media(max-width:$screen-sm-max) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
why to break a grid when you simply override it with media queries, e.g in sass
.navbar-toggle{
#media(max-width:$screen-sm-max) {
display: block !important;
}
}
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">