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.
Related
I'm having a problem with the alignment of two "buttons" (links) on the right in bootstrap.
My goals are two:
To make them as right-aligned as possible.
To always have a small margin between them.
Although at first the separation between them is more or less correct and I can get them to be aligned to the right without an excessive margin of the last element on the right side, as I reduce the size of the page, both end up overlapping.
I've managed to prevent this from happening by putting mr-x, mr-sm-x,... classes on them, but I can see that it doesn't make any sense because in order for it to work more or less well, I have to put an excessive amount of classes on them. Something like:
ml-3 ml-sm-1 ml-md-1 mr-4 mr-sm-2 mr-md-2 mr-lg-1 mr-xl-0
And the result is not optimal either.
I have tried to make it work with offset classes, with align-items-end and with justify-content-end. Also with float-right, but I always have problems with margins and overlap.
Here are some images that show the problem and the example in jsfiddle
Example on jsfiddle
Seems like you want to use Bootstrap's button groups:
<div class="container">
<nav class="navbar heading-title">
<span class="navbar-brand mb-0 h1">Título</span>
</nav>
<nav class="navbar row justify-content-end">
<div class="btn-group" role="group" aria-label="Basic example">
<a class="btn" href="#" role="button">
<i class="fa fa-user"></i>
</a> <a class="btn" href="#" role="button">
<i class="fa fa-user"></i>
</a>
</div>
</nav>
</div>
jsFiddle example
enter image description here
I want to move the bottons on the navbar to the right edge of the page. So I used the class " navbar-right" but the buttons stay at the center. what can i do?
here is what i wrote.
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-flulid">
<div class="navbar-header navbar-left ">
<a style="font-family:Serif;font-size:50px" class="navbar-brand" href="#">KHS</a>
</div>
<div id="barbuttons" class="navbar-right navbar-btn" >
<button style="width:150px;" type="button" class="btn btn-primary ">Home</button>
<button style="width:150px" type="button" class="btn btn-primary " >Portofolio</button>
<button style="width:150px" type="button" class="btn btn-primary ">Contact</button>
</div>
</div>
</nav>
navbar-right should do the trick.
You better investigate with browser dev tools.
For Chrome, hit F12 and select Elements then using the select elements tool (top left button), inspect the element styles.
More info: Inspect and Edit Pages and Styles
Explorer is similar; hit F12 and select DOM Explorer then using the select elements tool (top left button), inspect the element styles.
More info: Diagnose and fix layout problems
Other browsers have similar features.
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.
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 am building a project with Bootstrap and im facing little issue .I have a container below the Nav-top.My issue is that some portion of my container is hidden below the nav-top header.I dont want to use top-margin with container. Pls see below html in which im facing the issue
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>
</head>
<body>
<div class="navbar navbar-fixed-top ">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><i class="icon-home"></i>Home</li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
</li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="icon-eye-open">
</i>Assembly Elections
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Assembly Elections 2013</li>
</ul>
</li><li class="divider-vertical">
</li><li ng-class="{active:section=='tags'}"><i class="icon-th"></i>Constituecy</li><li ng-class="{active:section=='discuss'}"><i class="icon-time"></i>Election News</li><li class="divider-vertical"></li><li><i class="icon-bell"></i>Candidate</li></ul></div>
</div>
</div>
</div>
<div class="container" >
<ul class="nav nav-pills">
<li class="active">
Popular
</li>
<li>Trending</li>
<li>Latest</li>
</ul>
</div>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap-dropdown.js"></script>
<script src="~/Scripts/Collapse.js"></script>
</body>
</html>
This is handled by adding some padding to the top of the <body>.
As per Bootstrap's documentation on .navbar-fixed-top, try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body {
padding-top: 70px;
}
Also, take a look at the source for this example and open starter-template.css.
I guess the problem you have is related to the dynamic height that the fixed navbar at the top has. For example, when a user logs in, you need to display some kind of "Hello [User Name]" and when the name is too wide, the navbar needs to use more height so this text doesn't overlap with the navbar menu. As the navbar has the style "position: fixed", the body stays underneath it and a taller part of it becomes hidden so you need to "dynamically" change the padding at the top every time the navbar height changes which would happen in the following case scenarios:
The page is loaded / reloaded.
The browser window is resized as this could hit a different responsive breakpoint.
The navbar content is modified directly or indirectly as this could provoke a height change.
This dynamicity is not covered by regular CSS so I can only think of one way to solve this problem if the user has JavaScript enabled. Please try the following jQuery code snippet to resolve case scenarios 1 and 2; for case scenario 3 please remember to call the function onResize() after any change in the navbar content:
var onResize = function() {
// apply dynamic padding at the top of the body according to the fixed navbar height
$("body").css("padding-top", $(".navbar-fixed-top").height());
};
// attach the function to the window resize event
$(window).resize(onResize);
// call it also when the page is ready after load or reload
$(function() {
onResize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Just define an empty navbar prior to the fixed one, it will create the space needed.
<nav class="navbar navbar-default ">
</nav>
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
// Your menu code
</div>
</nav>
It happens because with navbar-fixed-top class the navbar gets the position:fixed. This in turns take the navbar out of the document flow leaving the body to take up the space behind the navbar.
You need to apply padding-top or margin-top to your container, based on your requirements with values >= 50px. (or play around with different values)
The basic bootstrap navbar takes height around 40px. So if you give a padding-top or margin-top of 50px or more, you will always have that breathing space between your container and the navbar.
I too have had this problem but solved it without script and only using CSS. I start by following the recommended padding-top for a fixed menu by setting of 60px described on the Bootstrap website. Then I added three media tags that resize the padding at the cutoff points where my menu also resizes.
<style>
body{
padding-top:60px;
}
/* fix padding under menu after resize */
#media screen and (max-width: 767px) {
body { padding-top: 60px; }
}
#media screen and (min-width:768px) and (max-width: 991px) {
body { padding-top: 110px; }
}
#media screen and (min-width: 992px) {
body { padding-top: 60px; }
}
</style>
One note, when my menu width is between 768 and 991, the menu logo in my layout plus the <li> options cause the menu to wrap to two lines. Therefore, I had to adjust the padding-top to prevent the menu from covering the content, hence 110px.
Hope this helps...
I know this thread is old, but i just got into that exactly problem and i fixed it by just using the page-header class in my page, under the nav. Also i used the <nav> tag instead of <div> but i am not sure it would present any different behavior.
Using the page-header as a container for the page, you won't need to mess with the <body>, only if you disagree with the default space that the page-header gives you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Bootstrap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<div class="navbar-right">
</div>
</div>
</nav>
</div>
<div class="page-header">
<div class="clearfix">
<div class="col-md-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<form role="form">
<div class="col-lg-6">
<div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
<div class="form-group">
<label for="InputName">Enter Name</label>
<div class="input-group">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Enter Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Confirm Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputMessage">Enter Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
</div>
</form>
</div>
If you are using Bootstrap 5 and want navbar at top then replace fixed-top with sticky-top.
Problem solved of hidden data under navbar.
i solved it using jquery
<script type="text/javascript">
$(document).ready(function(e) {
var h = $('nav').height() + 20;
$('body').animate({ paddingTop: h });
});
</script>
Easy:
Code (JS)
document.addEventListener("DOMContentLoaded", function(){
navbar_height = document.querySelector('.navbar').offsetHeight; //get the offset height
document.body.style.paddingTop = navbar_height + 'px'; // Add the offset height to the top padding
});
StackOverflow throws an error due to the class navbar not existing.