I'm having some issues bootstrap breadcrumb displayed in tabs. I want to both items side-by-side (similar to a tab in chrome). However, unable to do this properly. Any suggestions?
<ol class="breadcrumb">
<ul class="nav nav-tabs">
<li class="active">
Zika Virus
<i class="fa fa-close"></i>
</li>
</ul>
</ol>
EDIT:
To be more precise and clear, I want both items in the same tab. In my application, I will have tabs, each containing a topic and a close icon. I'm trying to create a UI similar to that of a internet browser tabs.
If this is not possible with this format, any suggestions in designing this UI would be greatly appreciated.
It took much longer than I expected, but it works. Check out this JSFiddle
How it works:
Bootstrap turns each child of <li class="active"> into tabs. The reason you were getting 2 tabs is because each <a> was turning into a tab, even though they were in the same <li>.
The CSS I wrote overwrites this to turn the <li class="active"> into the tab, rather than the children (by turning into a tab, I mean giving it borders, padding, etc.)
.nav-tabs li {
/* Give Bootstrap CSS normally applied to children
to the tab container */
color: #555 !important;
cursor: default !important;
background-color: #FFF !important;
border: 1px solid #DDD !important;
border-bottom-color: transparent !important;
margin-right: 2px !important;
line-height: 1.42857143 !important;
border-radius: 4px 4px 0 0 !important;
position: relative !important;
display: block !important;
padding: 10px 15px !important;
text-decoration: none !important;
list-style: none !important;
}
.nav-tabs li * {
/* Overwrite Bootstrap CSS */
border: none !important;
margin-right: 0 !important;
padding: 0 !important;
/* To display on the same line */
display: inline-block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ol class="breadcrumb">
<ul class="nav nav-tabs">
<li class="active">
Zika Virus
<a class="custom-inline" href="#"><i class="fa fa-close"> X</i></a>
</li>
</ul>
</ol>
Related
When you click on the dropdown button on the navbar(button labeled Dropdown), and then click off(anywhere in the page), you can see the dropdown button flash white briefly.
I've seen this quite similar bug: Bootstrap navbar "flashing" when clicking outside of menu to close it. But it, unfortunately, doesn't work(actually copy and pasted the exact same code in css).
Here's a minimal reproducible version of the bug on plunk: https://embed.plnkr.co/plunk/nBIvKcLMkYbey8Oa
Code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-static-top mb-0">
<ul class="nav navbar-nav">
<li class="nav-item dropdown" id="games-dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>asdf</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
nav {
background-color: #26445a !important;
border-color: #26445a !important;
margin: 0px !important;
}
.navbar a{
color: #EEFBFB !important;
}
.navbar-header a{
font-size: 1.45em !important;
}
.nav >li > a:hover, .nav > li > a:focus{
background-color: #335369 !important;
}
.nav-item{
background-color: #26445a !important;
font-size: 1.23em !important;
}
#games-dropdown > .dropdown-menu a{
background-color: #ffffff !important;
color: #000000 !important;
font-size: 1.2em !important;
}
#games-dropdown > .dropdown-menu a:hover{
background-color: #d1d1d1 !important;
color: #000000 !important;
}
Thanks a lot!
It's due to Bootstrap applying a background color on the focus and hover event.
So you can override this behavior
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover
{
background-color: unset !important;
}
I think that adding lots of new CSS classes might be confusing Bootstrap. In the CSS detailed at your sandbox link there are many different background commands all pointing in one way or another to your navbar and the links in your navbar. These could easily be getting in the way of each other. You don't especially have to add new CSS. You only need to edit the classes that already exist within Bootstrap nav. It's the focus specifically that is causing trouble.
.nav
.navbar-brand
.navbar-dropdown
.navbar-toggler-icon
.menu-item
.dropdown-item
Try removing all your background instructions to begin then add new backgrounds to the above.
I am trying to fix the behaviour of a nested navbar I have on my page. The main idea is that I have two levels of <ul>-tags, where on both levels the <li>-tags can contain links (i.e. <a>), so both levels have the ability to redirect the page. Upon hovering the top level <li>, I have the lower level display, otherwise it is hidden. This looks like this:
* {
font-family: Roboto;
}
.menu-container {
height: 29px;
background-color: #dcb400;
}
.menu {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
.menu-item {
position: relative;
}
.menu-item:hover {}
.menu-item-div {
display: inline-block;
margin-left: 0;
line-height: 1.5rem;
padding: 3.5px 9.5px;
color: black;
font-weight: 700;
font-size: 13px;
cursor: pointer;
height: 22px;
}
.menu-item:hover .menu-item-div {
background-color: black;
color: white;
}
.submenu {
position: absolute;
top: 29px;
width: auto;
background-color: white;
color: black;
z-index: 100;
padding: 0px;
display: none;
-webkit-box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
}
.menu-item:hover .submenu {
display: block;
}
.submenu-item {
display: block;
cursor: pointer;
}
.submenu-item:hover {
background-color: #ccc;
}
<body>
<div class='menu-container'>
<ul class='menu'>
<li class='menu-item'>
<a href='#'>
<div class='menu-item-div'>Menu item 1</div>
</a>
<ul class='submenu'>
<li class='submenu-item'>Submenu item 1</li>
<li class='submenu-item'>Submenu item 2</li>
<li class='submenu-item'>Submenu item 3</li>
</ul>
</li>
<li class='menu-item'>
<a href='#'>
<div class='menu-item-div'>Menu item 2</div>
</a>
<ul class='submenu'>
<li class='submenu-item'>Submenu item 4</li>
</ul>
</li>
<li class='menu-item'>
<a href='#'>
<div class='menu-item-div'>Menu item 3</div>
</a>
</li>
</ul>
</div>
</body>
Now, this works like a charm on desktop, as my submenus show up as soon as I hover a top level menu item. However, on mobile this doesn't work anymore, as the only (reasonable) way to hover a top level menu item is by clicking it, which results in the page redirecting to the top level <a> target. Is there a way to expand this code to also make it work on mobile, i.e. when tapping the top level menu item on mobile, the submenu should show up instead of the page redirecting?
The solutions I have found so far online are either concerning libraries like bootstrap or are way too clumsy. I am wondering if there is a way to do this with only HTML and CSS, or do we also have to involve some js?
Since you are not using your top level menu items for redirecting, you could abandon your references altogether and use divs instead:
<ul>
<li>
<div>Menu item 1</div>
<ul> <!-- display on hover of top level li -->
<li><a>Submenu item 1</a></li>
...
</ul>
</li>
...
</ul>
Or for your given example: https://jsfiddle.net/0fmbojqk/3/
I am currently making a horizontal drop-down menu, I have it working so that when you hover over an image, subsequent images appear below it, then when you move away from the main link; they disappear.
But the problem is, is I want it so that when you hover over one of the subsequent links, the links remain until you move away from them, at the moment they are disappearing when you move over the link.
HTML:
<nav id="navigation">
<ul style="list-style:none">
<li class="fixtures"><img id="sweets-button" src="images/Sweets_Button.png"></li>
<ul style="list-style:none" class="hidden">
<li ><img src="images/Sweets_Button-Dropdown.png"></li>
<li><img src="images/Sweets_Button-Dropdown.png"></li>
</ul>
</nav>
CSS:
#navigation ul.fixtures:hover{ /* Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class' */
color: #000;
margin-top:1px;
-webkit-transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
-webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
background: rgba(255,102,51,0.8);
opacity: 50%;
}
ul.hidden{
display: none;
position:absolute;
margin-top:-90px;
margin-left:110px;
}
li.fixtures:hover + ul.hidden{ /* Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class' */
display: block;
position:absolute;
margin-top:-20px;
margin-left:72px;
}
Thanks for any help!
Here is some jsfiddle, which may help you visualize it:
http://jsfiddle.net/QkY83/
Básically, You have to add the whole submenu (the ul element) inside of the parent menu item (li.fixtures). Here is a minimal example (updated in the jsfiddle you provided http://jsfiddle.net/QkY83/3/):
The HTML:
<nav id="navigation">
<ul style="list-style:none">
<li class="fixtures"><a> This is main link </a>
<ul style="list-style:none" class="hidden">
<li><a> This is first sub-link </a></li>
<li><a> This is Second sub-link </a></li>
</ul>
</li>
</ul>
</nav>
The CSS:
ul.hidden {
display: none;
position:absolute;
}
li.fixtures:hover ul.hidden {
/* Applied to the child ul */
display: block;
margin-top:-20px;
margin-left:72px;
}
I want to put a space between listitems of a listview in jquery mobile. To do this i put a margin to each list item. So far this works fine but there is a border on the left and right side of the listview which one can especially see in the gaps. For example i have this jsfiddle: http://jsfiddle.net/2BhAd/3/ .
I tried to solve the problem by setting the border of the listview to none but that does not work.
CSS:
.listitem {
margin-top: 10px !important;
}
#list {
border:none !important;
}
HTML:
<ul id="list" data-role="listview" data-theme="b" data-inset="true">
<li class="listitem"><a href="#">
<img src="http://placehold.it/100x100">
<h2>Broken Bells</h2>
<p>Broken Bells</p></a>
</li>
<!-- ... -->
</ul>
Try
.listitem {
margin-top: 10px !important;
}
#list{
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
#list .ui-li {
border: none;
}
This removes the borders from the list and individual items. It also removes the shadowing effect on the list.
Updated FIDDLE
I have a problem with extra white lines showing up under my list items. It's not a border as I haven't set any borders, except the one under My Account, it's just to show that the white line is not a border. The one under it is -- a 4px border the same color as the background.
This problem occurred after I had resolved a conflict between my Nivo Slider and the Woocommerce plugin on my WP site. I got both of them to work together, but then this other issue with the list cropped up. Any ideas as to what caused this and how to fix it?
Here's my CSS if that helps:
#header #navigation ul.nav > li.current_page_item > a
{ color: #D4145A;}
#header #navigation ul.nav > li:hover a {
border-width: 0px 0px 4px;
border-style: none none solid;
border-color: -moz-use-text-color -moz-use-text-color rgb(212, 20, 90);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
background: none repeat scroll 0% 0% rgb(212, 20, 90);}
and the HTML for it too:
<nav id="navigation" class="col-full parent" role="navigation">
<ul id="main-nav" class="nav fl parent">
<li class="page_item"></li>
<li class="page_item page-item-11"></li>
<li class="page_item page-item-12"></li>
<li class="page_item page-item-13 parent"></li>
<li class="page_item page-item-15 current_page_item parent">
<ul class="children"></ul></li>
</ul>
</nav>
Help please! I'm at my wits' end! Thanks!
Just to add:
This is how it looked before I fixed the conflict between my Nivo Slider and Woocommerce plugins:
[url=http://postimage.org/image/lx50u5qxx/] [img]http://s10.postimage.org/lx50u5qxx/noextraline.jpg[/img][/url]
http://postimage.org/image/lx50u5qxx/
If I go back and remove the fix to the Nivo-Woocommerce js conflict, my nav goes back to its old pretty self as linked above without the white lines.
My fix to the Nivo-Woocommerce conflict was this one that I found on here:
jQuery conflict issues between jScrollPane and NivoSlider WP plugin
Many thanks for the answers so far. Hope somebody out there can help me out.
ADDED:
Just noticed that in the above "before" image, the down arrows are not showing, which they are supposed to, and only shows up when I do the Nivo "fix". I guess that has something to do with it too? The css for the arrows is this:
#header #navigation ul.nav > li.parent a::after {
font-family: 'WebSymbolsRegular';
display: inline-block;
font-size: .857em;
margin-left: .618em;
content: ";";
color: #dedede;
font-weight: normal;
}
If it is not a border, it is probably a margin. Try giving the <li>
margin:0;
Try setting
border : 0;
outline : 0;
padding : 0;
margin : 0;
That should do it...