I'm using Twitter Bootstrap to built a layout. I'm having trouble with the positioning the dropdown in the navbar. If the .nav has pull-right, the dropdown that opens will always open to the left.
I want to be able to manually control whether it should open to the left or right. Is this possible?
<div class="navbar" id="navbar-top">
<div class="navbar-inner">
<div class="container">
<a class="logo pull-left" href="/index_dev.php/"></a>
<ul class="nav pull-right">
<li class="active"> Shots</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Explore <i class="icon-caret-down"></i>
<ul class="dropdown-menu span6">
<li class="column-menu span2">
<ul>
<li><i class="icon-caret-right"></i> Dry Fly</li>
<li><i class="icon-caret-right"></i> Popper</li>
<li><i class="icon-caret-right"></i> Terrestrial</li>
<li><i class="icon-caret-right"></i> Streamer</li>
</ul>
</li>
<li class="column-menu span2">
<ul>
<li><i class="icon-caret-right"></i> Wet Fly</li>
<li><i class="icon-caret-right"></i> Nymph</li>
<li><i class="icon-caret-right"></i> Emerger</li>
<li><i class="icon-caret-right"></i> Streamer</li>
</ul>
</li>
<li class="column-menu span2">
<ul>
<li><i class="icon-caret-right"></i> Wet Fly</li>
<li><i class="icon-caret-right"></i> Nymph</li>
<li><i class="icon-caret-right"></i> Emerger</li>
</ul>
</li>
</ul>
</li>
<li class="divider-vertical"></li>
<li>Sign up</li>
<li class="divider-vertical"></li>
<li>Sign in</li>
</ul>
</div>
</div>
</div>
You just need to override Bootstrap's .dropdown-menu.pull-right styles:
.navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right {
right: auto;
left: -19px;
}
.navbar .pull-right > li > .dropdown-menu::before, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right::before {
right: auto;
left: 9px;
}
.navbar .pull-right > li > .dropdown-menu::after, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right::after {
right: auto;
left: 10px;
}
Use the class dropdown-right in any right-pulled menu you'd like to override.
jsFiddle
Related
I want the sidebar to comeout when hovered over class 'product'
<div class="sidebar">
<nav class="sidebar-nav">
<ul>
<li>Overview</li>
<li>Website Analytics</li>
<li>Connected Services</li>
<li>About Me</li>
</ul>
</nav>
</div>
<div class="main-back">
<h5>Get Your Own Website <span>Now.</span> </h5>
<p>With Little Investment You can Get High End Website <br> With Responsiveness.</p>
Order-Now
<div class="icons">
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
<header>
<h3 class=".logo"><i class="fab fa-pied-piper-square"></i>SKILLREP</h3>
<nav class="navigation1">
<ul>
<li>PRODUCT <i class="fas fa-chevron-down"></i></li>
<li>TEMPLATE <i class="fas fa-chevron-down"></i></li>
<li>RESOURCE <i class="fas fa-chevron-down"></i></li>
</ul>
</nav>
I placed the sidebar at top:-40px using position absolute which becomes not visible when i hover over the product it is not coming out in the main page.
body .sidebar{
width: 100%;
height: 30vh;
background-color: black;
position: absolute;
top: -30vh;
}
.sidebar .sidebar-nav ul{
display: block;
margin-left: 38vw;
margin-top: 10vh;
}
.sidebar .sidebar-nav ul li a{
color: white;
line-height: 30px;
font-family: 'poppins',sans-serif;
}
body header .navigation1 ul li a:hover .sidebar{
top: 30vh;
}
Although it can be achieved accordingChange other Div style on hover
I don't recommend doing it that way. A better approach would be to use Javascript to achieve the effect.
First hide your sidebar using display:none; in CSS and then change it dynamically via JS.
function displaySidebar(x){
x.style.display="block";
}
<div class="sidebar" onmouseover="displaySidebar(this)">
<nav class="sidebar-nav">
<ul>
<li>Overview</li>
<li>Website Analytics</li>
<li>Connected Services</li>
<li>About Me</li>
</ul>
</nav>
</div>
I can't seem to find out why my nav links without dropdowns are affecting the ones that have them. They don't share a same class so that's not the issue.
I made sure in the CSS file to target the drop down links correctly. I feel like I'm missing something rather obvious here. For your viewing pleasure: JSFiddle
.dropdown li .menu {
display: none;
}
.dropdown:hover li .menu {
display: block;
float: none;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="dropdown">
<ul class="menu dropdown menu-hover-lines" data-dropdown-menu>
<li>Home</li>
<li>Collections
<ul class="menu">
<li>Autos</li>
<li>Models</li>
<li>Nature</li>
<li>Extreme Sports</li>
</ul>
</li>
<li>About me</li>
<li>Get in touch
<ul class="menu">
<li><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></li>
<li><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></li>
<li><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></li>
</ul>
</li>
</ul>
</div>
Change this
.dropdown:hover li .menu {
display: block;
float: none;
}
to this
.dropdown li:hover .menu {
display: block;
float: none;
}
Snippet
.dropdown li .menu {
display: none;
}
.dropdown li:hover .menu {
display: block;
float: none;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="dropdown">
<ul class="menu dropdown menu-hover-lines" data-dropdown-menu>
<li>Home</li>
<li>Collections
<ul class="menu">
<li>Autos</li>
<li>Models</li>
<li>Nature</li>
<li>Extreme Sports</li>
</ul>
</li>
<li>About me</li>
<li>Get in touch
<ul class="menu">
<li><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></li>
<li><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></li>
<li><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></li>
</ul>
</li>
</ul>
</div>
This is a piece of my code for sidebar menu.I want to create dashboard and drop down menu in left of screen. when I go on flower don't show it's sub menu.
(i want clickable)
<div class="navbar-default navbar-right sidebar">
<div class="sidebar-nav navbar-collapse">
<ul class="nav-fall">
<li class="charj">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i>
<ul class="nav-second-level">
<li>name</li>
<li>price</li>
</ul>
</li>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
<!------css----->
.sidebar .fa.arrow:before {
content: "\f105";
}
.sidebar .nav-second-level {
display: none;
}
.sidebar .nav-fall .charj a:hover .nav-second-level {
display: block;
}
Below 2 examples. The first one uses hover, the second one uses a click event.
.sidebar .fa.arrow:before {
content: "\f105";
margin-left: 3px;
}
.nav-second-level {
display: none;
}
.sidebar .nav-fall li:hover .nav-second-level {
display: block;
}
<div class="navbar-default navbar-right sidebar">
<div class="sidebar-nav navbar-collapse">
<ul class="nav-fall">
<li class="charj">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i>
<ul class="nav-second-level">
<li>name</li>
<li>price</li>
</ul>
</li>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
$(document).on("click", ".charj", function() {
$(this).find("ul").show();
})
.sidebar .fa.arrow:before {
content: "\f105";
margin-left: 3px;
}
.nav-second-level {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-default navbar-right sidebar">
<div class="sidebar-nav navbar-collapse">
<ul class="nav-fall">
<li class="charj">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i>
<ul class="nav-second-level">
<li>name</li>
<li>price</li>
</ul>
</li>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
I have the following html code:
<ul class="hover amazing-menu">
<li>
item1
</li>
<li class="parent-item">
item2 <span class="fa fa-caret-down"></span>
<ul class="hover sub-menu">
<li class="parent">
sub-item1 <span class="fa fa-caret-right"></span>
<ul class="sub-menu2">
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
</ul>
</li>
</ul>
</li>
</ul>
And the following style:
.hover > li.parent-item:hover > ul.sub-menu, .hover > li.parent:hover > ul.sub-menu2{
opacity: 1 !important;}
I want to show sub menu when I hover to element with .parent-item class. It works properly, But when I hover to its children, Sub menu is shown.
Try to use display: none; and trigger the shown on the shown element :hover.
Look at this example:
ul.sub-menu,
ul.sub-menu2 {
display: none;
}
a:hover + ul.sub-menu,
a:hover + ul.sub-menu2,
ul.sub-menu:hover,
ul.sub-menu2:hover {
display: block;
}
<ul class="hover amazing-menu">
<li>
item1
</li>
<li class="parent-item">
item2 <span class="fa fa-caret-down"></span>
<ul class="hover sub-menu">
<li class="parent">
sub-item1 <span class="fa fa-caret-right"></span>
<ul class="sub-menu2">
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
</ul>
</li>
</ul>
</li>
</ul>
Fiddle example
How can I add vertical divider after the li element on the main menu?
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> <span class="sr-only">(current)</span></li>
<li><a href="#" > نبذه عنا </a></li>
<li> اكادمية بوذيب للفروسيه </li>
<li> اسطابلات بوذيب </li>
<li> المركز الاعلامي </li>
<li> اتصل بنا </li>
<li> اكثر <i class="fa fa-bars"></i> </li>
<li> </li>
</ul>
This is the site I want to fix: the site
And this is the image I want the main menu to be like: the image
Can any one help me?
Although you could try this by giving border to sides, but nav items have more height than vertical line that you want to give, then you can try <pseudo:before> to achive this
.navbar-default .navbar-nav>li>a:after {
content: '';
display: inline-block;
position: absolute;
width: 1px;
background: #fff;
height: 30px;
right: 0;
top: calc(50% - 15px);
}
.navbar-default .navbar-nav>li:last-child>a:after,
.navbar-default .navbar-nav>li:first-child>a:after{
display:none;
}
Try this one
ul li{
float:left;
list-style:none;
padding:0 8px;
border-right:2px solid gray;
}
ul li:last-child{
border:none;
}
a{
text-decoration:none;
}
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> <span class="sr-only">(current)</span></li>
<li><a href="#" > نبذه عنا </a></li>
<li> اكادمية بوذيب للفروسيه </li>
<li> اسطابلات بوذيب </li>
<li> المركز الاعلامي </li>
<li> اتصل بنا </li>
<li> اكثر <i class="fa fa-bars"></i> </li>
</ul>