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.
Related
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'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.
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
I am trying to get my bullet-point.png images to show up on the right side of each of my navigation/li menu options.
I did it with some in-valid HTML5, but would prefer to do it properly. Here is my screenshot from before so it explains what I am after. (I previously just added in multiple strings on each menu item). I think it's better to have each menu item assigned to a class with a background-image defined instead.
The HTML/CSS below displays the navigation like the screenshot but without any of the bullet-point images. Any idea why?
HTML
<nav class="nav">
<div class="span12">
<ul>
<li class="bullet-point">HOME</li>
<li class="bullet-point">PROJECTS</li>
<li class="bullet-point">CASE STUDIES</li>
<li class="bullet-point">PROFILE</li>
<li class="bullet-point">NEWS & EVENTS</li>
<li class="bullet-point">LOCATION</li>
<li class="bullet-point">CONTACT</li>
</ul>
</div>
</nav>
CSS
.bullet-point {
margin-top: -5px;
margin-right: 10px;
background: url('img/bullet-point.png');
}
Fiddle: http://jsfiddle.net/avinvarghese/eemTZ/
Css:
.bullet-point {
margin-top: -5px;
margin-right: 10px;
list-style:none;
float:left;
}
.bullet-point:after {
content:" • ";
}
.bullet-point:last-child:after {
content: "";
}
It should be
ul {
list-style-image: url('img/bullet-point.png');
}
Background images do not apply here.
I am stumped. I am trying to make a set of icons that sit inside a container with a fixed width. The elements must be inside the parent container but must extend beyond the boundary and not line break when they reach the right border of the parent.
I am using Floated li elements
Here is the fiddle
Would like it to look like this.
Not this:
Thanks for any Help.
Here is the Code:
<div class="mainFooter">
<div class="iconContainer">
<ul class="nav nav-pills">
<li rel="tooltip" data-original-title="Services"><a class="icon-th-list icon-white">A</a>
</li>
<li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">B</a>
</li>
<li class="" rel="tooltip" data-original-title="Clients"><a class="icon-group icon-white">C</a>
</li>
<li class="" rel="tooltip" data-original-title="Reports"><a class="icon-dashboard icon-white">D</a>
</li>
<li class="" rel="tooltip" data-original-title="Preferences"><a class="icon-cogs icon-white">E</a>
</li>
<li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">F</a>
</li>
<li class="" rel="tooltip" data-original-title="Assets"><a class="icon-briefcase icon-white">G</a>
</li>
</ul>
</div>
.mainFooter {
background: #dddddd;
position: relative;
height: 40px;
width:30%;
}
.iconContainer {
position: absolute;
width: 100%;
border:1px solid red;
top:5px;
}
.mainFooter .nav > li{
float:left;
}
.mainFooter .nav > li > a {
padding:0px;
margin: 1px;
height:25px;
width:30px;
background:#2f65bb;
color: #ffffff;
font-size: 130%;
line-height: 25px;
display: inline-block;
text-align:center;
}
.white-space: nowrap on the <ul>. Do not float the elements, but use display: inline-block.
http://jsfiddle.net/nJydR/3/
you may try to setup fixed width for .nav-pills, something like
.nav-pills {
width: 230px;
}
http://jsfiddle.net/nJydR/4/