I have a dropdown menu in a panel body with another panel body with content under it. When clicking the dropdown menu it is hidden under the second panel body. I have tried various z-index's and overflow:visible / auto etc but had no joy.
example here: https://jsfiddle.net/084wukwz/1/
html:
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-body">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><h3 class="box-title"><i class="fa fa-fw fa-info-circle"></i> Heading</h3></a>
</div>
<p class="text-muted">Basic Info</p><br/>
<div id="collapseOne" class="panel-collapse collapse">
<p>Full Info</p>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-success"><i class="fa fa-fw fa-plus-circle"></i> button 1</button>
<button class="btn btn-success"><i class="fa fa-fw fa-plus-circle"></i> button 2</button>
<button class="btn btn-info"><i class="fa fa-fw fa-eye"></i>button 3</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:inherit;overflow:visible;">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 3</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 4</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 5</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-body">
<h3 class="box-title">Content</h3>
</div>
</div>
</div>
</div>
css:
.hpanel > .panel-heading {
color: inherit;
font-weight: 600;
padding: 10px 4px;
transition: all .3s;
border: 1px solid transparent;
}
.hpanel .hbuilt.panel-heading {
border-bottom: none;
}
.hpanel > .panel-footer {
color: inherit;
border: 1px solid #e4e5e7;
border-top: none;
font-size: 90%;
background: #f7f9fa;
}
.hpanel.panel-collapse > .panel-heading,
.hpanel .hbuilt {
background: #fff;
border-color: #e4e5e7;
border: 1px solid #e4e5e7;
padding: 10px 10px;
border-radius: 2px;
}
.hpanel .panel-body {
background: #fff;
border: 1px solid #e4e5e7;
border-radius: 2px;
padding: 20px;
position: relative;
}
.panel-body .panel-heading{
padding: 10px 0px;
}
.panel-collapse .panel-body {
border: none;
}
.hpanel {
background-color: none;
border: none;
box-shadow: none;
margin-bottom: 25px;
}
Use position: absolute; for your dropdown-menu (and remove its other style attributes).
overflow has nothing to do with this issue. If in doubt, always have a look at the CSS Reference.
Updated fiddle
Related
I want to show only the icons as default and on hover slide the sidemenu to the current state you see in the jsfiddle
Thanks in advance
https://jsfiddle.net/aq9Laaew/228/
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>
You can do it by changing navbars values on hover like this:
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 65px;
height: 100vh;
background: #2c2c2c;
transition:1s;
}
#sidebar:hover{
width: 259px;
}
#sidebar:hover .sidebar-item span{
opacity:1;
}
.sidebar-item {
padding: 10px 20px;
border-left: 5px solid transparent;
}
.sidebar-item span{
opacity:0;
transition:1s;
}
.sidebar-active {
border-left: 5px solid #b1a0ff;
color: #b1a0ff;
background: #474747;
}
.sidebar-item a {
align-items: center;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>
So from the comments this wasn't exactly what you were after but I put this together and might as well share it here anyway.
It animates the label in on hover using relative position and CSS transition. It does involve some changes to the HTML.
https://jsfiddle.net/Chipmo/111dd0sj/1/
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 259px;
height: 100vh;
background: #2c2c2c;
}
.sidebar-item {
padding-top: 20px;
}
.sidebar-item a {
align-items: center;
}
.sidebar-item i {}
.sidebar-left-cover {
background: #2c2c2c;
width: 40px;
height: 100%;
z-index: 2;
padding-left: 20px;
}
.sidebar-item .sidebar-label {
position: relative;
right: 100px;
transition: right 0.5s;
z-index: 1;
}
.sidebar-item:hover .sidebar-label {
right: -5px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i></div>
<span class="sidebar-label">Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
</div>
<span class="sidebar-label">Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i></div>
<span class="sidebar-label">Messages</span>
</a>
</div>
</div>
</div>
</div>
I'm trying to develop my first website with bootstrap, so I'm quite new to it.
I used the inverse navbar and I noticed that when I get my browser's window smaller the right side of the navbar compiles on a dropdown menu that isn't working. It doesn't drop down the menu.
This is how the window is normally
This is the dropdown menu that doesn't work properly on the navbar. PS- Its red bordered.
Here's my HTML:
body {
margin: 0;
}
.jumbotron{
align-items:center;
display:flex;
background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size:cover;
height:450px;
color:white;
height: 50vh;
}
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #2D2727;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
<!DOCKTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>WebHosting</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<!--NavBar-->
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div>
</div>
</nav>
</div>
</div><!--NavBar END-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<div class="columns">
<ul class="price">
<li class="header">Host</li>
<li class="grey">Free</li>
<li>Sem criação de WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite</li>
<li class="grey">€ 9.99</li>
<li>Criação do WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite + Dominio</li>
<li class="grey">€ 9.99 / year</li>
<li>Criação do WebSite</li>
<li>Dominio incluido</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
</body>
</html>
Use in head section in given order.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
body {
margin: 0;
}
.jumbotron {
align-items: center;
display: flex;
background-image: url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size: cover;
height: 450px;
color: white;
height: 50vh;
}
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}
.price .header {
background-color: #2D2727;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!--NavBar END-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<div class="columns">
<ul class="price">
<li class="header">Host</li>
<li class="grey">Free</li>
<li>Sem criação de WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite</li>
<li class="grey">€ 9.99</li>
<li>Criação do WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite + Dominio</li>
<li class="grey">€ 9.99 / year</li>
<li>Criação do WebSite</li>
<li>Dominio incluido</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
I'm trying to create a sidebar menu, but I am not sure really where to start.
How I need it to work is in the image below, when the main nav link 1 is clicked, it will slide in the sub nav items from the right that are associated to that selection. Obviously main nav link 2 will have it's own options too and link 3 could have no sub nav items.
Thanks in advance for any assistance!
Here's what I have so far:
$(".primary-nav .box").click(function(e) {
e.preventDefault();
$('.primary-nav').addClass('hidden-xs-up')
$('.secondary-nav').removeClass('hidden-xs-up');
});
$(".back-btn").click(function(e) {
e.preventDefault();
$('.secondary-nav').addClass('hidden-xs-up');
$('.primary-nav').removeClass('hidden-xs-up');
});
.sidebar {
background-color: #434a54;
height: 500px;
width: 120px;
margin: 60px auto;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
}
.sidebar .box {
color: #aab2bd;
display: block;
text-align: center;
border-bottom: 1px solid #656d78;
padding: 20px 10px;
text-decoration: none !important;
transition: .2s;
}
.sidebar .box:hover {
background-color: #4a89dc;
color: #f5f7fa;
}
.sidebar .nav-icon {
font-size: 30px;
display: block;
margin-bottom: 5px;
}
.sidebar .back-btn {
background-color: #4a89dc;
color: #f5f7fa;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="sidebar">
<div class="primary-nav">
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
More <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
</div>
<div class="secondary-nav hidden-xs-up">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/fj4Lou7w/
Based on your code and whitout change your markup I have a few suggestions to make simpler your slide-in animation:
Use position absolute for the secondary navs.
Use a class and transition to make the slide animation.
Use a reference from your primary buttons to target the right secondary element.
$(".primary-nav .box").click(function(e) {
e.preventDefault();
var targ = $(this).attr('href');
$(targ).addClass('showsub');
});
$(".back-btn").click(function(e) {
e.preventDefault();
$('.secondary-nav').removeClass('showsub');
});
.sidebar {
position:relative;
background-color: #434a54;
height: 500px;
width: 120px;
margin: 60px auto;
overflow:hidden;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
}
.sidebar .box {
color: #aab2bd;
display: block;
text-align: center;
border-bottom: 1px solid #656d78;
padding: 20px 10px;
text-decoration: none !important;
transition: .2s;
}
.sidebar .box:hover {
background-color: #4a89dc;
color: #f5f7fa;
}
.sidebar .nav-icon {
font-size: 30px;
display: block;
margin-bottom: 5px;
}
.sidebar .back-btn {
background-color: #4a89dc;
color: #f5f7fa;
}
.secondary-nav {
position:absolute;
z-index:10;
left:100%;
top:0;
width:100%;
background-color: #434a54;
transition:left .2s linear;
}
.secondary-nav.showsub {
left:0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="sidebar">
<div class="primary-nav">
<a href="#sec1" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary1
</a>
<a href="#sec2" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary2
</a>
<a href="#" class="box">
More <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
</div>
<div class="secondary-nav" id="sec1">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
</div>
<div class="secondary-nav" id="sec2">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
</div>
</div>
</div>
</div>
</div>
it is not the best solution, but on hover you can hide, move,... elements in the DOM with CSS like:
[
body {
font-family: Arial;
padding: 40px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
position: relative;
width: 60px;
}
ul.submenu {
opacity: 0;
position: absolute;
top: 0;
left: 120px;
transition: all 400ms ease-in-out;
}
ul li {
border-top: 1px solid white;
}
ul li a {
display: block;
background-color: #434a54;
text-align: center;
color: white;
text-decoration: none;
padding: 20px 0;
}
ul li:hover .submenu {
opacity: 1;
left: 61px;
}
<ul class="mainmenu">
<li>
Menu1
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</li>
<li>Menu2
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
<li>Menu3
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
<li>Menu4
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
</ul>
body{
font-family:Montserrat;
}
.navbar, .dropdown-menu{
background:#44c763;
border:none;
border-radius:10px;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 4px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #4011E8 5px double;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #F3937D 5px double;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #FC3665 5px double;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #F9D86F 5px double;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #0FFA08 5px double;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #D1F9DF 5px double;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #FF748C 5px double;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #FFF078 5px double;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
.social {
width: 90%;
float: left;
text-align: left;
}
ul.social-icons li {
display: inline-block;
}
ul.social-icons li a {
display: inline-block;
width: 50px;
height: 50px;
background: url("../images/img-sprite.png") no-repeat 0px 0px;
}
ul.social-icons li a.facebook {
background-position: 0px 0px;
}
ul.social-icons li a.facebook:hover {
background-position: 0px -50px;
}
ul.social-icons li a.instagram {
background-position: -150px 0px;
}
ul.social-icons li a.instagram:hover {
background-position: -150px -50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">About us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Residential</a>
</li>
<li>Office</li>
<li>Mixed Use</li>
</ul>
</li>
<li>Products</li>
<li>Gallery</li>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="">kunalyadav#gmail.com</li>
<li class="">984987454225</li>
<li class="connect-social">
<li></li>
<li></li>
</li>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
I have added the code to show social icons in the nav bar, but the image for icons is not shown, if hovered on the area it shows that it is clickable but image does not loads. Any help would be appreciated
It appears that you don't have anything inside of the href tags for your media links. In this codepen link, specifically on line 150 I added in an example image for the linkedin icon.
<li><img src="http://static2.intelimedia.pl/sub/Narysuj-sobie-Gonka-w17896.jpg" style="height:30px;"></li>
change some CSS & HTML
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">About us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Residential</a>
</li>
<li>Office</li>
<li>Mixed Use</li>
</ul>
</li>
<li>Products</li>
<li>Gallery</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="">kunalyadav#gmail.com</li>
<li class="">984987454225</li>
<li class="social"></li>
<li class="social"></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
CSS
body{
font-family:Montserrat;
}
.navbar, .dropdown-menu{
background:#44c763;
border:none;
border-radius:10px;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 4px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #4011E8 5px double;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #F3937D 5px double;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #FC3665 5px double;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #F9D86F 5px double;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #0FFA08 5px double;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #D1F9DF 5px double;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #FF748C 5px double;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #FFF078 5px double;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
.social {
width: 90%;
text-align: left;
}
ul.social-icons li {
display: inline-block;
}
li.social a {
display: inline-block;
width: 50px;
height: 50px;
background: url("../images/img-sprite.png") no-repeat 0px 0px;
}
li.social a.facebook {
background-position: 0px 0px;
}
li.social a.facebook:hover {
background-position: 0px -50px;
}
li.social a.instagram {
background-position: -150px 0px;
}
li.social a.instagram:hover {
background-position: -150px -50px;
}
https://jsfiddle.net/7pycxo8k/3/
I was wondering how would I re-position a drop-down menu.
What I am trying to achieve is a fake search. So when you click the search button, it activates a drop down with fake dummy results. I am trying to re-position the drop-down to make it look like it came from the search.
Here is my code
https://jsfiddle.net/judison/45f50ws9/
.searchBar {
background-color: #67B4AD;
color: white;
width: 280px;
border: none;
}
.dropdown-menu {
right: 100px;
}
.add-on .dropdown > .btn {
border: none;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
color: white;
background-color: #67B4AD;
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
color: white;
box-shadow: none;
-webkit-box-shadow: none;
background-color: #67B4AD;
}
<form class="navbar-form navbar-left" role="search">
<div class="searchBarPadding form-group">
<div class="input-group add-on">
<input style="height:22px;" type="text" class="searchBar" placeholder=" Search">
<div class="input-group-btn">
<div class="dropdown">
<button style="height:22px;" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="glyphicon glyphicon-search" style="height:10px;"></i>
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li class="disabled">CSS
</li>
<li>JavaScript
</li>
<li class="divider"></li>
<li>About Us
</li>
</ul>
</div>
</div>
</div>
</form>
I would really appreciate the advice!
Heres a very basic example that you can build off of
Codepen http://codepen.io/noobskie/pen/xwEXpv
Just added a click event to the .dropdown-toggle that will fade in the dropdown and removed the relative postion on
.input-group-btn,
.dropdown{
position:initial;
}
This may be what you're trying to accomplish. You can attach the button with an add on and adjust the width of the dropdown-menu to the form-control class so they are the same total width.
#searchForm .form-control {
background-color: #67B4AD;
color: white;
width: 280px;
border: none;
}
#searchForm .dropdown-menu {
width: 320px;
}
#searchForm .btn.btn-default {
border: 1px solid #67B4AD;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
color: white;
background-color: #67B4AD;
}
/* stop the glowing blue shadow */
#searchForm .form-control:focus {
color: white;
box-shadow: none;
-webkit-box-shadow: none;
background-color: #67B4AD;
}
#media (max-width: 767px) {
#searchForm .form-control {
width: 100%;
}
#searchForm .dropdown-menu {
width: auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
</ul>
<form class="navbar-form navbar-left" role="search" id="searchForm">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-search"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>HTML
</li>
<li class="disabled">CSS
</li>
<li>JavaScript
</li>
<li class="divider"></li>
<li>About Us
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>