I'm trying to make a nav, where tier 2 is a list inline (done with css, not with list-inline class) and the tier 3 should be a meganav as shown, but:
with the following CSS:
.dropdown-submenu-meganav .dropdown-menu{
position: relative;
width: 800px;
}
.inline {
width: 300px !important;
list-style-type: none !important;
margin: 0 !important;
padding: 0 !important;
}
.inline>li {
display: inline !important;
width: 60px !important;
}
.inline>li>a {
display: block;
width: 60px;
}
and a snippet of the nav (added open class for debugging)
<li class="dropdown open">
Tier1
<ul class="dropdown-menu inline">
<li class="dropdown-submenu dropdown-submenu-meganav open">
<a tabindex="-1" href="#">Tier2 item1</a>
<ul class="dropdown-menu">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 mega-nav-section-wr">
<div class="mega-nav-section">
<h3 class="mega-nav-section-title">Header</h3>
<ul class="mega-nav-ul">
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
it shows up as follows:
So unwillingly, it expands the parent element, and if i hover it, it turns into:
So the tier 2 should show as inline, but doesnt.
Any help or pointing in the right direction will be much appreciated.
Related
This is a simple bootstrap code I am trying, where the floated block elements have extra space between them. How do I remove it, and why is it there ?
<ul class="nav nav-pills">
<li style="width: 40%; background: #8ac1dc;" class="active">
About
</li>
<li style="width: 40%; background: #ff6666">
Account
</li>
</ul>
Jsfiddle
Remove margin
CSS
.nav-pills>li+li{
margin:0px;
}
Try this:-
<ul class="nav nav-pills">
<li style="width: 40%; background: #8ac1dc;" class="active">
About
</li>
<!-- -->
<li style="width: 40%; background: #ff6666;margin:0">
Account
</li>
</ul>
Go to your bootstrap.css file on line 4093 and edit 2px to 0
.nav-pills > li + li {
margin-left: 0;
}
Update the bootstrap.css margin-left from 2px to 0px
.nav-pills > li + li {
margin-left: 0px;
}
Add your custom class in ul like my-nav-pills
and add css like below
.my-nav-pills li{
margin-left:0px;
}
it is batter to overwrite the bootstrap class and dont change the css of default bootstrap class.
I've search and searched but not of the answers are having the desired outcome for some reason.
At the moment my navbar is collapsing at 768px, however I want it to collapse at 1200px instead, I've changed the #media in the CSS files accordingly to reflect this however it just doesn't seem to be taking any effect, what on earth am I doing wrong?
I've tried following the instructions like explained here: Change bootstrap navbar collapse breakpoint without using LESS
but still nothing.
My site is http://www.yourtechgeek.co.uk/
Hope someone can help as I'm really scratching my head now.
TIA
Looking at your site, it is defined for 768 pixels. Change into the following in file bootstrap.min.css or your own css file.
#media (min-width: 1200px)
.container {
width: 750px;
}
to change the navbar break point , for example for the mobile hamburger to appear at 1200px , see this example snippet below
or see fiddle > fiddle
#media (max-width: 1200px) {
.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;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown active">
Getting started <b class="caret"></b>
<ul class="dropdown-menu">
<li>Download Bootstrap</li>
<li class="divider"></li>
<li class="dropdown-header">Examples</li>
<li>Basic template</li>
<li>Starter template</li>
<li>Grids</li>
<li>Jumbotron</li>
<li>Navbar</li>
<li>Sign-in page</li>
<li>Sticky footer</li>
<li>Offcanvas</li>
<li>Carousel</li>
<li>Theme</li>
<li class="divider"></li>
<li class="dropdown-header">Compatibility</li>
<li>Migrating from 2.x to 3.0</li>
<li>Browser support</li>
<li>Third party support</li>
</ul>
</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h1>Twitter Bootstrap 3.0</h1>
<p class="lead">Starter template with CSS and JS included.</p>
<p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
</div>
</div>
i created a navbar header with the new bootstrap 4 alpha frame work.
<nav class="navbar navbar-light navbar-fixed-top pulse-header">
<ul class="nav navbar-nav navbar-nav-left">
<li class="nav-item"><i class="ion-grid pulse-icons"></i></li>
</ul>
<ul class="nav navbar-nav float-xs-right">
<li class="nav-item"><i class="ion-ios-search-strong pulse-icons"></i></li>
<li class="nav-item">
<a href="#" class="open-notification-sidebar">
<i class="ion-earth pulse-icons"></i>
<span class="pulse-circle"></span>
</a>
</li>
<li class="nav-item"><i class="ion-chatboxes pulse-icons"></i></li>
</ul>
</nav>
css
.pulse-header {
height: 60px;
min-height: 60px;
max-height: 60px;
background-color: #1f2532;
padding: 13px 15px;
}
.pulse-header .navbar-nav-left {
margin-left: 20px;
}
.pulse-header .nav > .nav-item {
margin-right: 20px;
}
.pulse-header .nav > .nav-item > a {
position: relative;
}
i would like to have a logo centered in the navbar but do not know how to get it done, cause when i put on into, my icons on the right side are moving down.
bootply
You just need one block of css
Here is a working example of how I achieved what you're are looking for.
I added an img tag as a child of the nav bar and then set it to bellow code.
Try this:
.navbar img {
display:block;
margin: 0px auto;
}
In the event that when you begin to populate the navbar you find that the logo no longer centers then attempt this code for your logo
Or try this:
#logo {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
This method will not be as automatic however will work if your content beigns to offset the logo.
Working Example: http://www.bootply.com/XVlsafgbzD
I have a menu icon that when I click on it my list items appear;
but it pushes down other elements. I want to set my z-index to it hasn't any effect on other element. but it doesn't work.
<div class="dropdown hidden-md hidden-lg ">
<ul>
<li>
<div class="dropbtn">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</div>
</li>
<li class="dropdown-content">
<ul>
<li>خانه</li>
<li>توانایی ها</li>
<li> <a href='products.php'>محصولات</a></li>
<li><a href='projects.php'>پروژه ها</a></li>
<li><a href='aboutus.php'>درباره ما</a></li>
<li><a href='contactus.php'>تماس با ما</a></li>
</ul>
</li>
</ul>
</div>
CSS:
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
clear: both;
float: right;
direction: rtl;
background-color: #f9f9f9;
min-width: 75px;
font: 1.2em Yekan;
}
.dropdown {
position: relative;
z-index: 999999999999;
float: right;
text-align: right;
}
JS
$(".dropbtn").on("click",
function() {
$(".dropdown-content").toggle();
}
);
z-index is a relative property that display your index according to the order where you put your element in your page.
<div>here the z-index is equal to 1</div>
<div>here the z-index is equal to 2</div>
If you want to be sure that your z-index is take in consideration you can put an absolute position to your html element but you break the index stack of your element.
For sample in your case if you want to do that your .dropdown is still above all the other element you can do :
.dropdown {
position: absolute;
z-index:999999999999;
float: right;
text-align: right;
}
But it's will also run with a relative element position and in than case you have to be careful of teh impact because you break the "z-index stack". One advice is that case is to set all the z-index of all your element impact by your design.
First, I put your code on embed and add some style to see your btn.
Second, I fix your bug by replacing position:relative by position:absolute
$(".dropbtn").on("click", function(){
$(".dropdown-content").toggle();
});
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display:none;
clear: both;
float: right;
direction: rtl;
background-color: #f9f9f9;
min-width: 75px;
font:1.2em Yekan;
}
.dropdown {
position: absolute;
z-index:999999999999;
float: right;
text-align: right;
}
ul {
list-style-type:none
}
.dropbtn {
cursor:pointer;
}
.bar {
display:block;
height: 4px;
width: 24px;
background: black;
margin-bottom: 5px;
border-radius: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown hidden-md hidden-lg ">
<ul>
<li>
<div class="dropbtn">
<span class="bar1 bar"></span>
<span class="bar2 bar"></span>
<span class="bar3 bar"></span>
</div>
</li>
<li class="dropdown-content">
<ul>
<li>خانه</li>
<li>توانایی ها</li>
<li> <a href='products.php'>محصولات</a></li>
<li><a href='projects.php'>پروژه ها</a></li>
<li><a href='aboutus.php'>درباره ما</a></li>
<li><a href='contactus.php'>تماس با ما</a></li>
</ul>
</li>
</ul>
</div>
The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.
The HTML is,
<nav class="nav">
<ul>
<li class="menu-item">Hi Alexander!</li>
<li class="menu-item"><a>My Account</a>
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
</li>
<li class="menu-item"><a>Contact Us</a></li>
<li class="menu-item"><a>Chat</a></li>
<li class="menu-item"><a>Chat</a></li>
</ul>
</nav>
The CSS is as follows,
.nav {
margin-top: 2px;
position: relative;
float: right;
}
.nav > ul {
padding: 0;
margin: 0;
}
.menu-item{
list-style: none;
float: left;
}
.menu-item .my-sub-menu {
visibility: hidden;
position: absolute;
padding: 0;
margin: 0;
}
.menu-item:hover .my-sub-menu {
visibility: visible;
}
.list-item {
list-style: none;
}
I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.
Tahnk you in advance.
If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.
try doing
.sub-list{
padding:0px !important;
}
and if by second menu u want it to come under contact us
then change the position of the div
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
into the next li element ie cntact us
kind of a fiddle
fiddle ex