<nav class="navbar navbar-default" style="width:100%">
<div class="container">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li ><a id="firstid" href="#">FOR HIM</a></li>
<li><a href="#" >FOR HER</a></li>
<li>FOR KIDS</li>
<li>PERSONALIZED</li>
<li>BIRTHDAYS</li>
<li>NOVELTY</li>
<li>HOME</li>
<li>EXPERIENCES</li>
<li>OCCASIONS</li>
<li>NEW</li>
</ul>
<ul id="multicol-menu" class="nav pull-right">
<li class="dropdown">
MultiCol Menu <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<div class="row" style="width: 400px;">
<ul class="list-unstyled col-md-4">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
CSS
#multicol-menu{
display: none;
}
#firstid:hover #multicol-menu{
display: block;
}
I have written above code having a navigation bar now i want to show 3 columns list item on hover.I have tried different things but could't get the result.it would be very nice it anyone provide same as in the image. i have written custom css too but its not working.My intention is to show like in the image
https://i.stack.imgur.com/Nthnl.png
Well, try the following CSS:
div.row {
width: 400px;
display: none;
opacity: 0;
}
ul.list-unstyled {
float: left;
width: 30%;
}
#multicol-menu li.dropdown:hover {
display: block;
opacity: 1;
}
Related
I have a dropdown menu, that when opened I need it to stretch the full length of the container, i'm using twitter bootstrap, currently it sits like in the image
Here is the html
<ul id="multicol-menu" class="nav navbar-nav pull-right">
<li class="dropdown">
Stay Connected
<ul class="dropdown-menu">
<div clas="row">
<li>
<div class="row">
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li>test1-1</li>
<li>test1-2</li>
<li>test1-3</li>
</ul>
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li>test2-1</li>
<li>test2-2</li>
<li>test2-3</li>
</ul>
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<a href="#myModal" role="button" data-toggle="modal">
<img src="img/book-now-block.png" />
</a>
</ul>
</div>
</li>
</div>
</ul>
</li>
put this css might help
/* CSS used here will be applied after bootstrap.css */
.nav { margin-bottom: 0; }
.nav > li.dropdown.open { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:block; width: 100%; }
.dropdown-menu>li { display: block; }
Here is my HTML code.
I want first li #listDomain and a linkChooseDomain in fixed position i.e. without scrolling.
<ul>
<li id="listDomain" style="overflow-x: hidden; height: 525px; display:block">
<a id="alinkChooseDomain"><span class="nav-label">Choose Domain</span></a>
<ul class="nav nav-second-level">
<li>
<div class="input-group">
<input id="txtDomainSearch" type="text" class="form-control" placeholder="Search" />
</div>
</li>
</ul>
<ul class="nav nav-second-level">
<li>select All</li>
</ul>
<ul class="nav nav-second-level">
<li>ABC</li>
</ul>
<ul class="nav nav-second-level">
<li>JKL</li>
</ul>
<ul class="nav nav-second-level">
<li>CDF</li>
</ul>
</li>
</ul>
position: fixed;
<li id="listDomain" style="overflow-x: hidden; height: 525px; display:block; position: fixed;">
By the way, your use of white-spacing is very confusing.
A slight refactoring of your code, I moved <a id="alinkChooseDomain"><span class="nav-label">Choose Domain</span></a> inside of <div class="input-group">
jsFiddle
<ul class="nav">
<li class="dropdown opener">Moodle community
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle free support" href="https://moodle.org/support">Moodle free support</a></li>
<li class="divider"> </li>
<li class="dropdown-submenu">Moodl
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle Docs" href="http://docs.moodle.org">Moodle Docs</a></li>
</ul>
</li>
</ul>
</li>
<li class="divider"> </li>
<li><a title="Moodle.com" href="http://moodle.com/">Moodle.com</a></li>
<li class="dropdown opener langmenu">English (en)
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="English (en)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=en">English (en)</a></li>
<li><a title="عربي (ar)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=ar">عربي (ar)</a></li>
</ul>
</li>
</ul>
.navbar .nav > li:nth-of-type(2) a:hover{
background-color: #407a61 !important;
color:#fff !important;
}
Why my css is not working here i would like to change the hover background-color of the second element how can i apply it. Is any other way to do it.
Check Here Your Answer
You have to remove > operator from the CSS
Here is the Demo
HTML
<div class="navbar ">
<div class="nav">
<ul>
<li>First One</li>
<li>Second One</li>
<li>Three One</li>
<li>Four One</li>
</ul>
</div>
</div>
CSS
.navbar .nav li:nth-of-type(2):hover {
color:red;
}
I'm using bootstrap 2.3 for menu links
<div class="span3">
<ul class="nav nav-pills nav-stacked">
<li class="active">My profile</li>
<li>Edit</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
Is it possible to place two links (My profile and edit) in one line by using bootstrap like showed on picture or any other way to do it. Thanks.
You can achieve this with just CSS, using the nth-child selector. It is still responsive.
li:nth-child(1), li:nth-child(2) {
display:inline-block;
}
DEMO: http://jsfiddle.net/z5pXh/3/
nest another ul inside and a little additional css
CSS
ul.nav-edit {
margin-bottom: 0;
}
ul.nav-edit li.active {
display:inline-block;
width: 88%;
}
HTML
<div class="span3">
<ul class="nav nav-pills nav-stacked">
<li>
<ul class="nav nav-pills nav-edit">
<li class="active">My profile</li>
<li class="pull-right">Edit</li>
</ul>
</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
Check out the fiddle at http://jsfiddle.net/Y2LUZ/
Live Demo
If fixed sizes are good for you, you can use this:
HTML
<div class="span3">
<ul class="nav nav-pills nav-stacked pos-rel">
<li class="col-first active">My profile</li>
<li class="col-second">Edit</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
CSS
.pos-rel {
position: relative;
}
.col-first {
width: 300px;
}
.col-second {
position: absolute;
top: 0;
left: 305px;
}
I'm using zurb foundation 4.
I create a top bar with a search form within the same:
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="has-form">
<form>
<div class="row collapse" >
<div class="small-10 columns">
<input type="text">
</div>
<div class="small-2 columns">
S
</div>
</div>
</form>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">Drop1
<ul class="dropdown">
<li>Dropdown Level 3a</li>
<li>Dropdown Level 3b</li>
<li>Dropdown Level 3c</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Drop2
<ul class="dropdown">
<li>Dropdown Level 3a</li>
<li>Dropdown Level 3b</li>
<li>Dropdown Level 3c</li>
</ul>
</li>
</ul>
</section>
I need to increase the size in the search field without losing responsiveness. Does anyone have any idea how can I do?
http://cl.ly/image/1a412p3M3e1J
If you're using SASS, simply change:
input { height: $topbar-input-height }
To:
input { height: $topbar-height }
If you're using CSS, change the line with:
.top-bar input { height: 2.45em; }
To:
.top-bar input { height: 45px; }
Follow a similar process if you wish to change the width.
I am a big fan of CDN, so editing the Foundation files is not an option.
Here is the workaround that works for me:
.top-bar input {
height: auto !important;
padding-top: .35rem !important;
padding-bottom: .35rem !important;
}