I have a boostrap nav with dropdowns.
<ul class="nav navbar-nav pull-right">
<li>
<div class="dropdown">
<a data-target="#" data-toggle="dropdown">User <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Rediger konto</li>
<li>Vis ordre</li>
</ul>
</div>
</li>
....
Between the menu entries I want to add pipes.
#options-nav .nav>li:after {
content: "|";
...
}
https://jsfiddle.net/casperskovgaard/eww51eo3/
Problem is that the pipe for the dropdown entry is shown on a new line
The div inside the list item is the cause of the issue.
Because of its display: block style it is pushing down the after pseudo-element.
Add a display: inline-block to the div alongside the after pseudo-element:
#options-nav .nav>li>div {
display: inline-block;
}
Related
You can see that the icon and "sign in" link isn't straight. How do I fix this?
Here is the code:
https://html-css-js.com/?html=%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang=%22en%22%3E%0A%20%20%3Chead%3E%0A%20%20%20%20%3Cmeta%20charset=%22UTF-8%22%20/%3E%0A%20%20%20%20%3Cmeta%20http-equiv=%22X-UA-Compatible%22%20content=%22IE=edge%22%20/%3E%0A%20%20%20%20%3Cmeta%20name=%22viewport%22%20content=%22wi$*$dth=device-wi$*$dth,%20initial-scale=1.0%22%20/%3E%0A%20%20%20%20%3Clink%20rel=%22stylesheet%22%20href=%22styles.css%22%20/%3E%0A%20%20%20%20%3Clink%20rel=%22stylesheet%22%20href=%22https://fonts.googleapis.com/icon?family=Material+Icons%22%3E%0A%20%20%20%20%3Ctitle%3EGoogle%3C/title%3E%0A%20%20%3C/head%3E%0A%20%20%3Cbody%3E%0A%20%20%20%20%3C/ul%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%20button%22%3E%3Ca%20href=%22#%22%3ESign%20In%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%22%3E%3Cspan%20class=%22material-icons%20navigation%20icon%22%20%3Eapps%3C/span%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%22%3E%3Ca%20href=%22#%22%3EImages%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%22%3E%3Ca%20href=%22#%22%3EGmail%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22left%22%3E%3Ca%20href=%22#%22%3EAbout%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22left%22%3E%3Ca%20href=%22#%22%3EStore%3C/a%3E%3C/li%3E%0A%20%20%20%20%3C/ul%3E%0A%0A%20%20%3C/body%3E%0A%3C/html%3E%0A&css=*%20%7B%0A%20%20margin:%200;%0A%20%20padding:%200;%0A%20%20font-size:%2012px;%0A%20%20font-family:%20arial,%20sans-serif;%0A%7D%0A%0Ali%20%7B%0A%20%20float:%20right;%0A%20%20list-style-type:%20none;%0A%20%20margin-top:%2020px;%0A%7D%0A%0Aa%20%7B%0A%20%20text-decoration:%20none;%0A%20%20color:%20black;%0A%7D%0A%0A.left%20%7B%0A%20%20float:%20left;%0A%7D%0A%0A.left%20a%20%7B%0A%20%20margin-left:%2020px;%0A%7D%0A%0A.right%20%7B%0A%20%20margin-right:%2020px;%0A%7D%0A%0A.button%20%7B%0A%20%20background-color:%20#4485f4;%0A%20%20padding:%207px;%0A%20%20border-radius:%205%25;%0A%7D%0A%0A.button%20a%20%7B%0A%20%20color:%20#fff;%0A%7D%0A%0A.icon%20%7B%0A%20%20color:%20grey;%0A%7D%0A%0Aa%20%7B%0A%20%20justify-items:%20center;%0A%7D%0A&js=
In your css, you can write this in your ul selector:
ul {
display: flex;
align-items: center;
}
But in this case, rearrange your html code and write them in the order the options are going to be on your navbar.
<ul>
<li class="left">About</li>
<li class="left">Store</li>
<li class="right">Images</li>
<li class="right">Gmail</li>
<li class="right"><span class="material-icons navigation icon">apps</span</li>
<li class="right button">Sign In</li>
</ul>
Another way is to do that is to use line-height in ul.
ul {
line-height: 20px;
}
Although it is not always perfect.
I want to hide following nav-stacked list ios class contained <li> element. I used this code for it. But it doesn't work at all. but background-color is apply for that element. Why is that. I use Bootstrap 3
.ios {
dispaly : none;
}
here is my html code:
<ul class="nav nav-sidebar nav-pills nav-stacked">
<li id="ios-parent">
<b class="fa fa-forumbee"></b> iOS
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS1
</li>
<li class="sub-menu ios">
<b class="fa fa-forumbee"></b> iOS2
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS3
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS4
</li>
</ul>
you have a typo:
.ios {
display : none;
}
instead of dispaly
EDIT
Assuming that the spelling in your CSS is correct, it is probably a matter of your selector being overriden.
In Bootstrap:
.nav > li {
display: block;
}
this is more specific than your .ios selector, try replacing your one with:
.nav > .ios {
display: none;
}
which will make it specific enough to override Bootstrap styling. You can easily see what is being applied using the web inspector in your browser
I wanted to let my "Kuantan" menu to stay highlighted after i hover to their child menu which is "kiosk no.35". But i try to change few way to let it stay active but i had failed to do so. Anything i miss out on my code? Please point my wrong. Thanks
Here is the html code:
<ul class="treeview-menu">
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=35" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.35</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> UTC Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=36" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.36</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Temerloh
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=37" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.37</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Bentong
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=6" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.6</a></li>
</ul>
</li>
<hr/>
</ul>
Here is the css where i hover the dropdown then the dropdown-menu will came out:
/*3rd level sidebar menu */
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
What i want is that after i hover the dropdown and went to dropdown-menu, the dropdwn will stay highlighted. Is there possible? Sorry i'm still new to this css skill.
As explained in my comment - .dropdown should still be "highlighted" on :hover, because .dropdown-menu is nested inside it and therefore you are still hovering over .dropdown.
/* Assuming you are making nested lists display:none */
ul{
list-style: none;
}
.dropdown-menu{
display: none;
}
.dropdown:hover{
background: yellow;
}
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
DEMO HERE
By using jQuery this is one option with your current code (fiddle here: https://jsfiddle.net/j0wLj6z9/)
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown').hover(function(){
$(this).toggleClass('highlighted');
});
});
</script>
and your css is whatever you'd like:
.highlighted
{
background: yellow;
}
Also include jQuery in your project:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
I'm building my website here and I would like my left menu to be shifted down when the dropdown menu opens so that they don't overlap. Here's the HTML code:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
PROJECTS
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>NAPOLI</li>
<li>PORTRAITS</li>
</ul>
</li>
<li>BIO</li>
<li>CONTACT</li>
<li>BLABLABLA</li>
</ul>
</div>
Anyone could help?
Thanks!
Javascript problem with fadein fadeout
$(document).ready(function(){
$(".nav > li > a").bind("click", function(){
$('.dropdown-menu').fadeOut();
$(this).parent().find('.dropdown-menu').fadeIn();
});
});
What you could do is override the css for the class dropdown-menu.
What I did in the inspector was under .dropdown-menu remove the styles
position:absolute;
float:left;
.dropdown-menu {
position:relative !important; <-- or static
float:none !important;
}
This will make the drop down menu have its own space and not hover over the rest of your menu. But something is also wrong with your toggle. It seems to be broken. The markup looks fine. Did you tamper with the javascript or something?
So for your javascript problem, it is a little hard to test it but try this:
Revised: Based On http://getbootstrap.com/javascript/
$(document).ready(function() {
$('.dropdown').on('show.bs.dropdown', function () {
$('.dropdown-menu',this).fadeIn();
});
$('.dropdown').on('hide.bs.dropdown', function () {
$('.dropdown-menu',this).fadeOut();
});
}
You can achieve this by overriding the bootstrap defaults for absolute positioning and dropdown toggling:
.dropdown.open .dropdown-menu {
display: block;
position: static;
float: none;
width: 200px;
}
And then to keep the menu open, a little bit of JS:
$('#myTabDrop1').on('click', function(e) {
// Remove active tab
$('#myNavbar').find('nav > li.active').removeClass('active');
$(this).parent().addClass('active').addClass('open');
});
New HTML
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
PROJECTS
<ul class="dropdown-menu" role="menu">
<li>NAPOLI</li>
<li>PORTRAITS</li>
</ul>
</li>
<li>BIO</li>
<li>CONTACT</li>
<li>BLABLABLA</li>
</ul>
</div>
JSFiddle
I am using Twitter Bootstrap and I want to make a group of hidden fields inside a dropdown menu:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Export
<b class="caret bottom-up"></b>
</a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a id="downloadJsonButton">Link1</a></li>
<div id="downloadFormFilesDiv">
<li class="divider"></li>
<li><a id="downloadXformsButton">Link2</a></li>
<li><a id="downloadXmlButton">Link3</a><br /></li>
</div>
</ul>
</li>
However, links inside div element looks differently than those which are outside it. I want to make them look the same (links: 2 and 3 should look like link1). How can I accomplish it?
ul li{
width: 300px;
height: 70px;
background: #000;
color: white;
}
Now the menu is look the same to link content and to none content.
Try delete the div between <li> to <li>, you got iligal use with him.
Hope i helped..