Using Bootstrap 4 for the first time, and I am trying to do something that was quite easy in Bs3: I want link items in my navbar to collapse to a hamburger menu when screen size is xs.
Now the documentation and another answer sort of touch on this, but I appear to be following the correct classes, and yet when the screen is sized XS, the link items do not collapse - they just disappear.
Here's the JSFiddle with CSS for the full view, but here's what I am doing with my navbar:
<nav class="navbar navbar-full navbar-light" style="background-color: #E4491C; padding: 0px;">
<p id="toptext">Test</p>
</nav>
<nav class="navbar navbar-full navbar-light" style="background-color: #002b52">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">TopDog</a>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="pull-sm-right navbar-brand2" href="#">Contact</a></li>
<li class="nav-item"><a class="pull-sm-right navbar-brand2" href="#">About</a></li>
</ul>
</div>
</div>
</nav>
So I am using toggleable class, I am specifying these as link-items; the only difference I can spot is that I am also using a pull-sm-right class, which should bring the links to the right side of the nav. Removing them did not fix the issue.
Question: Why is Bootstrap failing to display these links as a collapsible menu when I resize the page?
Because it's responsive menu. The links hides when it reaches 768 pixels and the navbar-header is only visible as well as Hamburger Menu Icon.
It looks like the Hamburger Menu Icon is missing too, that's because you didn't add it.
Use this code to add it:
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
Good luck.
Related
I have a main menu for desktop and tablet but I want the links in that menu to change when the user gets to the mobile view. Not really sure where to start. This is what I did for the Bootstrap menu for my desktop version in my header.php file:
<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</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"<?php bloginfo( 'name' ); ?>><img src="<?php bloginfo('template_directory');?>/img/snaglogo.png" /></a>
</div>
<div class="collapse navbar-collapse">
<?php
$args = array(
'menu' => 'header-menu',
'menu_class' =>'nav navbar-nav navbar-right',
'container' =>'false'
);
wp_nav_menu( $args );
?>
</div><!--/.nav-collapse -->
Am I adding another piece for mobile? Not really sure.
I would suggest on your navbar using the bootstrap class:
<div class="hidden-xs hidden-sm">
Then creating a separate navbar for mobile with the classes:
<div class="visible-xs visible-sm hidden-md hidden-lg">
This will allow you to set the links to something completely different, without effecting the navbar in an adverse way.
Here is more information about the "hidden" and "visible" classes:
http://getbootstrap.com/css/#responsive-utilities-classes
For those of you who are looking to separate the mobile phone screen(the one with the button) and the normal bar only, use these classes:
Button based menu:
<div class="hidden-xs">
Regular menu bar:
<div class="visible-xs hidden-sm hidden-md hidden-lg">
Bootstrap 4 offers utilities to hide or add menu items for specific breakpoints. In my case I had to add some menu items in mobile view that are part of a secondary navigation in the desktop view (which disappears on mobile view). So for adding menu items only on screens that are below the lg breakpoint add the d-lg-none class (example is using React syntax):
<li className="nav-item d-lg-none">
<Link to="/dashboard" className="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show">
Dashboard
</Link>
</li>
More information can be found here: https://getbootstrap.com/docs/4.0/utilities/display/
Bootstrap 4 Hide Element Based On Screen Size
.hidden-* class (Bootstrap 4 Alpha) and .visible-* (Bootstrap 3) is removed.
You need to use display property, mainly d--none (hide) and d--block or d-*-inline-block (show).
If you want an element to hide on size sm and below, but visible on md, lg and xl, use d-none d-md-block.
s (<576px) sm (≥576px) md (≥768px) lg (≥992px) xl (≥1200px)
d-none d-sm-block hide show show show show
d-none d-md-block hide hide show show show
d-none d-lg-block hide hide hide show show
d-none d-xl-block hide hide hide hide show
d-block d-xl-none show show show show hide
d-block d-lg-none show show show hide hide
d-block d-md-none show show hide hide hide
d-block d-sm-none show hide hide hide hide
enter link description here
I'm trying to get a navbar fixed at the top of my page to animate (slide in/out) when it appears and reappears. I'd also like it to collapse when viewed on mobile devices.
I'm just starting with bootstrap and most of the code is from a tutorial, including the button which appears when the screen and displays a drop down.
When I call collapse('toggle') there isn't any animation, even though to docs seem to suggest there is supposed to be an animation (http://getbootstrap.com/javascript/#collapse talks about the time between when it starts hiding and is hidden)
I'm using flat ui, though removing it doesn't solve the problem. I also tried removing everything in the button besides the navbar-brand link; it still doesn't animate. I tried seeing if the panel-collapse or navbar-collapse classes would make it animate, also didn't work.
Is there a quick fix to this problem? Should I manually be coding this animation?
Here's the html/js code I'm using:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).click(function() {
$("#lyla-nav").collapse('toggle')
});
});
</script>
<div id="lyla-nav" class="navbar navbar-default navbar-fixed-top collapse nav-collapse">
<div class="container">
<button data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<!--literally is making each line inside of the button--><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>Welcome
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
</div>
Thank you in advance!
I'm creating a theme with Wordpress and Bootstrap and have included their 'dropdown' for a filtering element on the page. It works fine in all browsers, including when I scale them down to mobile size. But, when I visit the site from an iPhone or iPad the dropdown doesn't drop down, so to speak.
This is the markup that I have:
<div class="col-md-4 col-sm-6">
<div class="bdo-employee-filter dropdown">
<div class="dropdown-toggle filter-button" type="button" data-toggle="dropdown">
<div class="text">Filtrera</div>
<div class="arrow"></div>
</div>
<ul class="dropdown-menu" role="menu">
<li>Rensa filtrering</li>
<li>IT</li>
<li>Office of World Reign</li>
</ul>
</div>
</div>
I have tried following Bootstrap's example and can't really see what could be wrong. Nothing happens at all when I try to open the dropdown from an iphone or ipad. On the same page I use their navbar dropdown, and that works fine on all devices.
My problem
I am using Bootstrap 3.0 and need to use a fixed navbar, which will stay at the top of a DIV on the left side and NOT extend all the way 100% of the width of the window (like I usually see Bootstrap's example do). I have some very simple code below, using ASP.NET MVC 4 which will explain the RenderSection areas.
I have included an image which shows what I am trying to do. Currently the navbar is only extending about 75% of the left side container, not the full 100% of that left side container like I want it to.
Like I said above, I want the navbar to be fixed so when you scroll it stays in one spot within that left DIV.
Any tips/hints would be greatly appreciated! Thanks!
I also saw this question (Navbar fixed to top but not full-width) but I do not want to have to dynamically maintain this navbar with a fixed pixel width in media queries. I'd prefer it to fill out the entire left side DIV that contains it.
(http://i.imgur.com/YLzmkHp.jpg)
My code
<div class="container">
<div class="row">
<!--LEFT SIDE-->
<div class="col-md-9">
<div data-spy="affix" data-offset-top="0">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
</div>
</nav>
</div> <!--end data-spy=affix-->
<!--the LeftSide below just contains basic placeholder text in a <p> tag-->
#RenderSection("LeftSide", true)
</div>
<!--RIGHT SIDE-->
<div class="col-md-3">
<!--the RightSide below just contains basic placeholder text in a <p> tag-->
#RenderSection("RightSide", true)
</div>
</div>
</div>
Partially Solved (update)
I was able to solve my main problem that I listed above by using this bit of jQuery
$(window).resize(function () {
var w = $("#leftSide").width();
$("#navWrapper").css("width", w);
});
But this does not work within an iFrame.
If anyone has any insights on solving this for use in an iFrame, it'd be greatly appreciated.
Have you tried placing your navbar and main content area in one column and then your right sidebar in a column by itself? Then add a bit of CSS to correct for the navbar position and adjust for responsiveness.
LINK: http://www.bootply.com/ZJCGxiUD6g
I'm having trouble with my twitter bootstrap dropdown menus getting hidden underneath items and also with its transparency. Example: http://pictorious-web-qa.herokuapp.com
The menu z-index goes below the profile photo when the screen
shrinks down to around 400px wide. I checked the media query but
couldn't find any z-index settings.
See http://pictorious-web-qa.herokuapp.com/profiles/albert for an
example.
I want to keep the translucency in the menu nav but want to up the
solid opacity of the dropdown menu items. I've set the opacity on
the menu container directly but that didn't seem to change anything.
The menu also has a z-index problem with the vimeo video on the home
page http://www.pictorious.com if you shrink the screen width down
to where the nav bar menu overlaps the video. I've also tried
setting the z-index to no avail and not sure how to set the wmode in
the vimeo default iframe embed technique
It's a standard twitter bootstrap nav:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<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>
<a class="brand" href="/">Pictorious!</a>
<div class="btn-group pull-right" id="nav-login">
<a class="btn" href="/login">Sign-In</a>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Challenges</li>
<li>About</li>
<form class="navbar-search pull-left form-search" action="/search">
<input type="text" class="search-query span2" placeholder="Search" name="keyword">
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
The only thing that seems to change on the overlapping photo is the margins and padding on the smaller media queries.
So the answer was that I needed to set position to relative in the default bootstrap carousel and that's why it was not affected by my z-index property.
position: relative; z-index:-1;
Even if you can't find the z-index settings, you can always override them by writing another class or ID of the same name later in your CSS-- just make another z-index there. Try setting the z-index of the top element lower as well as setting that of the bottom element higher.