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;
}
}
Related
I have a navigation menu set up and on the desktop it works. For moblie screensthe icon expands the parent and displays all the menu items.
The challenge I have is when I click a menu item the list doesn't expand the parent box and the list is hidden within the parent.
I tried changing overflow: hidden to overflow: visible but that just expands the menu from the outset.
I've tried setting z-index but that doesn't appear to work either.
Most of the CSS is just copied from bootstrap
Just a noob so may need to provide more css.
.navbar .btn-navbar {
display: block;
}
.nav-tabs::after,
.nav-pills::after {
clear: both;
}
nav .nav li {
position: relative;
}
<nav class="navigation" role="navigation">
<div id="navigation">
<div class="navbar">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="nav-collapse">
<jdoc:include type="modules" name="nav" style="html5" />
</div>
</div>
<div class="row-fluid">
<div class="title">
<H1>TITLE</H1>
</div>
</div>
</div>
</nav>
I want to see the list visible over everything else when the menu name is selected. As it is I see some items but they always stop at the bottom of the parent and hide behind it.
You will have to set a fixed height on your #navigation (could be px, em, rem,...)
For example :
#navigation {
height: 52px;
}
You may also need to add a background-color on your .nav-collapse
Edit :
I added this code in the head tag which resolve some problems
<style>
#media (max-width: 979px) {
nav.navigation {
display: grid;
justify-items : center;
}
div#navigation {
max-height : 60px;
}
div#navigation a.btn-navbar {
padding: 7px 50px; }
div#navigation .nav-collapse {
max-height : 0;
transition: max-height .5s;
}
div#navigation:hover .nav-collapse,
.nav-collapse:hover
{
max-height : 130px;
}
div.title h1 {
margin:0;
padding 2px;
text-align : center;
}
}
</style>
But there are more, and to be honest, to me this is a Bootstrap question more than a CSS question because it's probably easy to solve with a good understanding of bootstrap functionalities. You should think about clarifying your question title on that point (for example "Bootstrap menu always visible on mobile devices")
How do I horizontally and vertically center a textbox from the bottom border of the navigation menu to the end of the banner image on a responsive website?
I would appreciate any suggestions.
I updated the changes. It is now centered.
CSS Media Queries min-width 768: Contain
CSS Cover:
CSS Contain:
I prefer this background because the whole image is showing up. However, I cannot get this method to work because I cannot get the fontbox to be centered between the navigation's yellow bottom border and the bottom of the banner image. Also if I increase the browser size, the background image will not take up the width of the browser.
banner's background image:
Original JSFiddle:
https://jsfiddle.net/4enbjpyz/
Update JSFiddle:
https://jsfiddle.net/me37hnvs/
This is what I have:
Bootstrap HTML:
<div class="container-fluid">
<div class="bannerHeader">
<nav class="navbar navbar-expand-md navbar-dark" id="myNavmenu">
<a class="navbar-brand d-md-none ml-auto" href="#" id="menu">Menu</a>
<button class="navbar-toggler" type="button" id="TEST" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item pr-3"><a class="nav-link active" href="#">Nav 1</a></li>
<li class="nav-item"><a class="nav-link" href="payment.html">Nav 2</a></li>
</ul>
</div>
</nav>
<div class = "d-flex">
<div class = "container justify-content-center fontBox pl-4 pr-4 pt-3">
<h3>Heading</h3>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
</div>
<div class="container bg-white">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
CSS:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
a {
text-decoration: none;
}
body {
background: #fff;
}
.container-fluid {
padding:0;
}
.bannerHeader {
/* background-color: I normally use a different color, however I used a red background to show there is no negative space (red) */
background-color: #fe0808;
background-image: url("../images/banner.jpg");
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 450px;
}
#myNavmenu {
background-color: rgba(0,0,0,.1);
border: 1px solid yellow;
}
/* Center Horizontal and Vertically */
.fontBox {
background-color: rgba(255,255,255,.3);
color: #fff;;
letter-spacing: 1px;
margin: 0;
position: absolute;
top: 58%;
left: 50%;
transform: translate(-50%, -58%);
width: 90%;
}
p {
font-size: 16px;
}
/* Medium devices (tablets, 768px and up)*/
#media (min-width: 768px) {
.bannerHeader {
background-position: center top;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding: 0;
/* aspect ratios: divide the height of the original image by it's own width, and multiply by 100 to get the percentage value */
padding-bottom: 52.33%;
position: relative;
}
}
The <img> tag has some special behaviours in comparison with other tags. In your case I suggest you to use a div (or maybe figure) tag and attach the banner as background image and then set any CSS attribute to control the image behaviour. Then you can use css flex box to center the box. Also you can use CSS calc() method if the height of the navigation and the font box are fix. The sudo example could be like this:
top: calc(100% - ({navigationHeight} + {fontBoxHeight}));
Do NOT forget to put the font box inside the figure tag if you will use this approach.
Hope it helps.
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">