Showing submenu for an icon button - html

I try to create a navigation menu. Some of the items should get a submenu which will be shown by clicking/hovering the arrow-icon.
But I got some problems to position the submenu correctly
JSFiddle: http://jsfiddle.net/g651mwdu/
<nav>
<div class="nav-button-group"> <span class="nav-button-group-title">Title</span>
<div class="nav-button-container"> <span class='fa fa-plus button-icon'></span>
<span class="button-text">Add</span>
<div class="button-arrow-down"></div>
<div class="submenu">Show some more elements</div>
</div>
<div class="nav-button-container"> <span class='fa fa-cog button-icon'></span>
<span class="button-text">Change</span>
<div class="button-arrow-down"></div>
</div>
<div class="nav-button-container"> <span class='fa fa-link button-icon'></span>
<span class="button-text">Link</span>
</div>
<div class="nav-button-container"> <span class='fa fa-comment-o button-icon'></span>
<span class="button-text">Tooltip</span>
</div>
<div class="nav-button-container"> <span class='fa fa-trash-o button-icon'></span>
<span class="button-text">Remove</span>
</div>
</div>
</nav>
CSS
.nav-button-container {
display: inline-block;
width: 2em;
height: 2.5em;
padding: .25em;
text-align: center;
color: #555;
}
.button-text {
display: block;
font-size: .5em;
margin: .5em 0;
}
.button-icon {
vertical-align: middle;
font-size: 1.3em;
}
.button-arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #B4B4B4;
margin: 0 auto;
}
.line-separator {
display: inline-block;
width: 1em;
}
nav {
background-color: #f2f2f2;
padding: .3em 0;
border-radius: 7px;
}
.nav-button-group {
display: inline-block;
background-color: #fafafa;
padding: .3em;
border-radius: 5px;
}
.nav-button-group-title {
display: block;
font-weight: bold;
font-size: .7em;
color: #555;
padding: 0 .5em;
background-color: #F2F2F2;
border-radius: 4px;
}

Is this what you are trying to achieve (navigation with font awesome icons aligned to the drop-down text)?
You're using buttons to build your menu which isn't necessary (or recommended). Use ul unordered lists and list items li to build your nav. Then inserting icons is pretty straight forward.
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
Example Snippet
.navbar {
border-radius: 0px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px 6px 6px 6px;
border-radius: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0px;
height: 0px;
border-color: transparent;
border-style: solid;
border-width: 5px 0px 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0px 6px 6px;
-moz-border-radius: 6px 0px 6px 6px;
border-radius: 6px 0px 6px 6px;
}
<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> Brand
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Profile
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><i class="fa fa-envelope-o fa-fw"></i> Inbox
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i> Trash
</li>
</ul>
</li>
<li>Hello
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><i class="fa fa-envelope-o fa-fw"></i> Inbox
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i> Trash
<li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a>
</li>
<li><a tabindex="-1" href="#"><i class="fa fa-folder-open-o fa-fw"></i> Users</a>
</li>
<li><a tabindex="-1" href="#"><i class="fa fa-file-o fa-fw"></i> Login</a>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login
</li>
</ul>
</div>
</nav>

Related

Turn multi layer dropdown from clicking to hoverable

I currently have a multi layered dropdown that goes up to three lists. I am trying to have all the lists that show up automated by hover. This is because my intention is to have an href link, right now the link only works on the third dropdown list because the click the others before is used to display the next dropdown.
i tried to add :hover in the css of the classes dropdown-menu and dropdown submenu with "display: block;" but this is not functioning and the lists still shows only when clicked.
https://jsfiddle.net/nmv2d41w/1/
DROPDOWN:
<div class="dropdown p-left-15">
<button class="filter-btn filter-btn-default dropdown-toggle" type="button" data-toggle="dropdown">Filter Coupons</button>
<!--Category 1-->
<ul class="dropdown-menu filter-dropdown">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C1-1</a>
<!--Category 2-->
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C2-1</a>
<!--Category 3-->
<ul class="dropdown-menu">
<li>C3-1</li>
<li>C3-2</li>
<li>C3-3</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" value="" href="#">C1-2</a>
<!--Category 2-->
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C2-a</a>
<!--Category 3-->
<ul class="dropdown-menu">
<li>C3-a</li>
<li>C3-b</li>
<li>C3-c</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu:hover {
position: relative;
display: block;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.filter-btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.filter-btn.focus, .filter-btn:focus, .filter-btn:hover {
color: #333;
text-decoration: none;
}
.filter-btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.filter-btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}
.filter-dropdown li {
padding: 0px 8px;
font-size: 14px;
}
.filter-dropdown li:hover {
background-color: #e6e6e6;
}
.filter-dropdown li a {
color: black;
text-decoration: none;
}
you can try like this
html
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card my-3">
<div class="card-header">
Bootstrap 4 Multilevel Dropdown Hover
<div class="options float-right">
<a class="settings"><i class="fa fa-cog"></i></a>
<i class="fa fa-chevron-up"></i>
<i class="fa fa-refresh"></i>
<i class=" fa fa-expand"></i>
<i class="fa fa-times"></i>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<div class="btn-group">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
href="">
Dropdown
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a class="dropdown-item" href="#">level 1</a></li>
<li><a class="dropdown-item" href="#">level 1</a></li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item" tabindex="-1" href="#">
level 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" tabindex="-1" href="#">level 2</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">
level 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">3rd level</a></li>
<li><a class="dropdown-item" href="#">3rd level</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">level 2</a></li>
<li><a class="dropdown-item" href="#">level 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css
.dropdown-submenu {
position: relative;
}
.dropdown-submenu> a:after {
content: ">";
float: right;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: 0px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
js
$(".btn-group, .dropdown").hover(
function () {
$('>.dropdown-menu', this).stop(true, true).fadeIn("fast");
$(this).addClass('open');
},
function () {
$('>.dropdown-menu', this).stop(true, true).fadeOut("fast");
$(this).removeClass('open');
});
working demo
Let me know if you have any doubt.
try something like this...
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-item">Some action</li>
<li class="dropdown-item">Some other action</li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Even More..</a>
<ul class="dropdown-menu">
<li class="dropdown-item">3rd level</li>
<li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a>
<ul class="dropdown-menu">
<li class="dropdown-item">4th level</li>
<li class="dropdown-item">4th level</li>
<li class="dropdown-item">4th level</li>
</ul>
</li>
<li class="dropdown-item">3rd level</li>
</ul>
</li>
<li class="dropdown-item">Second level</li>
<li class="dropdown-item">Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Social Media Icons Responsive

I can't seem to make my social media icons be responsive when in cellular mode. it stays to the very corner of the right. I would like it to be centered /horizontally right under the bio section. I'm finding it a bit difficult because I'm not using bootstrap for this feature, just basic ul list. If anyone can help, i would appreciate it.
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="about1.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="index.php" title="Email">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>About</h1>
</div>
<main>
<div class="row">
<div class="col"><p> <h5> Eddie Munoz is an Austin, Texas based character artist currently working with QC Games, a video game development company. He previously worked at Carbine Studios in Aliso Viejo, California helping create various creatures, armors, mounts, and weapons for WildStar; a free-to-play online game. Be sure to follow him on instagram for his latest projects. <h5><br></div>
<!-- <img src="images/hammer.gif" alt="" width="200" height="275"><-->
</div>
</main>
<footer class="page-footer">
<ul>
<li>
<i class="fa fa-instagram fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-linkedin-square fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-twitter fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-deviantart fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-paint-brush fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<a href="index.php" title="Email">
<i class="fa fa-envelope-o fa-lg" aria-hidden="true" style="color:white"></i></a>
</ul>
</li>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
position: center;
}
h5{
color: #FFF;
margin: 10px 75px 10px;
padding-left: 2px;
padding-right: 2px;
font-size: .9em;
}
.row{
display: flex;
flex-flow: column wrap;
margin-left: .6em;
margin-right: .6em;
}
.col{
flex: 1;
margin: .5em;
padding: 15px 75px 15px;
color: #FFF;
font-size: .9em;
}
.page-footer{
display:flex;
margin: 10px 475px 10px;
list-style-type: none;
}
.page-footer ul{
align-items:center;
}
.page-footer ul li{
display:inline-block;
margin-right: 20px;
margin-left: 20px;
}
#media screen and (min-width: 640px){
.row{flex-flow: row wrap;}
main .col:nth-child(2){flex: 1;}
}
#media screen and (min-width: 960px){
main .col:nth-child(2){flex: .40;}
}
main {flex: 1;}
try this (i gave the ul a class to avoid affecting other uls in the page) :
ul.social-icons {
display: block;
margin: 0 auto;
text-align: center
}
ul.social-icons li {
display: inline-block;
}

How to keep a div stayed in same position css

Well, I have a category panel picture and I am trying to create it into HTML.
I have tried this code but I hover over a category a sub_category panel appears but every panel seems to have margin at top. I want to have every panel same position just like in picture.
I tried top: 0 but it didn't have any affect. Can anyone help?
.category_nav {
height: 40px;
margin-top: 28px;
}
.category_nav_ul {
list-style-type: none;
padding: 0;
}
.category_nav_ul>li {
display: inline-block;
}
#category_nav_ul_category {
width: 380px;
cursor: pointer;
}
#category_nav_div {
margin-top: 5px;
width: 380px;
position: absolute;
background-color: white;
padding-bottom: 10px;
}
.category {
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 1px;
margin-left: 0 !important;
border-radius: 0 !important;
border: 0 !important;
}
.category:hover {
border: 2px;
background: linear-gradient(to right, red 0px, #E5002B 3px, transparent 3px);
background-color: white;
border-top: 1px solid grey !important;
border-bottom: 1px solid grey !important;
}
.fa-chevron-right {
font-weight: 100px !important;
font-size: 10px !important;
}
.left-menu-ul {
list-style: none;
}
.left-mega-menu {
background: #fff none repeat scroll 0 0;
left: 90%;
position: absolute;
top: 0;
width: 470px;
opacity: 0;
visibility: hidden;
z-index: 2345;
transition: .3s;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 60px;
}
.left-menu ul li:hover>.left-mega-menu {
opacity: 1;
visibility: visible;
left: 100%;
}
.sub_categories {
border-radius: 0 !important;
padding-top: 6px;
padding-bottom: 6px;
border-left: 2px solid #E5002B;
border-top: 0px !important;
border-right: 0px !important;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
<div class="left-menu collapse in" id="left-menu">
<nav>
<ul class="left-menu-ul list-group">
<li class="category list-group-item">
<i class="fa fa-camera fa-fw"></i>
<a href="/mystore/category/Camera">Camera
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Camera/sub_cat/">
<li class="list-group-item sub_categories">Camera</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Clothes">Clothes
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Clothes/sub_cat/">
<li class="list-group-item sub_categories">Clothes</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-mobile fa-fw"></i>
<a href="/mystore/category/Mobiles">Mobiles
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Mobiles/sub_cat/">
<li class="list-group-item sub_categories">Mobiles</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Tablet/sub_cat/">
<li class="list-group-item sub_categories">Tablet</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Graphics Cards">Graphics Cards
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Graphics Cards/sub_cat/">
<li class="list-group-item sub_categories">Graphics Cards</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Computer/sub_cat/">
<li class="list-group-item sub_categories">Computer</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/DVDs/sub_cat/">
<li class="list-group-item sub_categories">DVDs</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Laptop/sub_cat/">
<li class="list-group-item sub_categories">Laptop</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-television fa-fw"></i>
<a href="/mystore/category/Television">Television
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Television/sub_cat/">
<li class="list-group-item sub_categories">Television</li>
</a>
</div>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
Remove position relative from category li and apply it to its parent
.left-menu-ul {
list-style: none;
position: relative;
}
fiddle

IE creates unnecessary offset on menu subitems

I'm using a bootstrap template called sb admin 2 as reference to a project.
For some reason only in IE (as always) it has a problem with an offset being created upon the submenus. Using the inspect I could see that when I marked the line-height property off and then on again, it became the same as the other browsers.
IE:
FF:
The menu it's a plugin called metismenu, and I saw at the sb admin 2 source code a piece of javascript that seems to fix the problem but didn't work for me.
I'm using the IE11 version, but I guess it'll be the same error at others.
Here's the fiddle:
https://jsfiddle.net/macmessa/ubqqs70c/
$(document).ready(function() {
/* BootStrap */
$(".menu4").addClass("navbar-default sidebar navbar-collapse").attr("role", "navigation");
$(".menu4").addClass("navbar-collapse collapse in");
$(".menu4").attr("aria-expanded", "true");
$(".menu4 ul").addClass("nav");
$(".menu4 ul ul").addClass("nav-second-level");
$(".menu4 ul ul ul").addClass("nav-third-level");
$(".menu4 li.itemPai a:not(.isParent)").append('<span class="fa arrow"></span>');
// Plugin
$('.menu4').metisMenu();
});
.menu4 ul li a {
cursor: pointer;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar ul {
width: 100%;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\25BA";
}
.sidebar .active>a>.fa.arrow:before {
content: "\25BC";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.menu4 {
width: 250px !important;
}
.sidebar {
z-index: 1;
position: absolute;
margin-top: 51px;
}
.navbar-right li {
margin-left: auto;
}
}
#media(max-width:768px) {
.menu4 {
width: auto;
}
.sidebar {
z-index: 1;
position: absolute;
width: 100%;
}
.navbar-right li {
float: left;
}
}
.navbar-right {
margin-right: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script>
<div id="pagina" class="container-fluid">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navegação</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank">
<img alt="" src="/Compartilhado/Images/logo.png" height="20" />
</a>
<a class="navbar-brand" href="/PM1.MVC/">
Projeto Modelo
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope-o fa-fw"></i>
<span class="badge">42</span>
<i class="fa fa-caret-down"></i>
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-usuario">
<li><i class="fa fa-user fa-fw"></i> Perfil do Usuário</li>
<li><i class="fa fa-gear fa-fw"></i> Configurações</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logoff</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-support fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-ajuda">
<li><i class="fa fa-book"></i> Manual</li>
</ul>
</li>
</ul>
<div class="menu4" id="mnuPrincipal">
<ul>
<li class="itemPai"><a id="mnuExemplo">Exemplo</a>
<ul>
<li><a class="isParent" href="/PM1.MVC/Menu" id="mnuExemploMenu">Menu</a></li>
<li><a class="isParent" href="/PM1.MVC/Controle" id="mnuExemploControle">Controle</a></li>
<li class="itemPai"><a id="mnuExemploMensagem">Mensagem</a>
<ul>
<li><a class="isParent" href="/PM1.MVC/MensagemAlerta" id="mnuExemploMensagemAlerta">Alerta</a></li>
<li><a class="isParent" href="/PM1.MVC/MensagemNotificacao" id="mnuExemploMensagemNotificacao">Notificacao</a></li>
</ul>
</li>
<li><a class="isParent" href="/PM1.MVC/MapaMetropolitano" id="mnuExemploMapaMetropolitano">Mapa Metropolitano</a></li>
<li><a class="isParent" href="/PM1.MVC/TratamentoErro" id="mnuExemploTratamentoErro">Tratamento de Erro</a></li>
</ul>
</li>
<li class="itemPai"><a id="mnuCadastro">Cadastro</a>
<ul>
<li><a class="isParent" href="/PM1.MVC/Usuario" id="mnuCadastroPesquisaOtimizada">Pesquisa Otimizada</a></li>
<li><a class="isParent" href="/.PM1.MVC/Item" id="mnuCadastroExemploCRUD">Exemplo CRUD</a></li>
</ul>
</li>
<li class="itemPai"><a id="mnuRelatorio">Relatório</a>
<ul>
<li><a class="isParent" id="mnuRelatorioExemplo">Exemplo de Relatório</a></li>
</ul>
</li>
<li class="itemPai"><a id="mnuUtilitario">Utilitário</a>
<ul>
<li><a class="isParent" href="/.PM1.MVC/Configuracao" id="mnuUtilitarioConfiguracao">Configuração</a></li>
<li><a class="isParent" id="mnuUtilitarioNotificacao">Notificação para Usuário</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div id="conteudo">
</div>
</div>
<div class="modal fade" id="divModalPerfilUsuario" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Perfil do Usuário</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Nome:
<br /> USER
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Login:
<br /> USR1
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Empresa:
<br /> C
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Área:
<br />
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img alt="foto" src="/Compartilhado/Images/usuarioNaoIdentificado.png" width="75" height="90" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
You can try to put:
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
line-height:0;
color:transparent;}
and
.menu4 ul li a {
cursor: pointer;
line-height:1.45em;
}
Preview at: https://jsfiddle.net/ubqqs70c/4/

Bootstrap navbar is not responsive

I have coded up a bootstrap navbar, however when I tried to test its responsiveness, it does not create the little hamburger icon like it should...
I have an outer container for my page which has a fixed width, and an inner container for my fixed-top navbar of course. I have tried playing around with the containers, but it doesnt make the navbar responsive at all, so I must be missing something, or some code is conflicting with the responsive navbar??
fyi: the flex code doesnt seem to be working correctly in here :/
thanks guys
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
<ul class="nav navbar-nav navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
You have a few issues that you need to fix.
You need a navbar-header, that includes the button that will be shown on small screen sizes.
<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 navbar-left" href="#">PAGE NAME</a>
</div>
You need to wrap your menu content in a collapse div, that will be shown/hidden on button click on small screen sizes.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
3. The container inside of your menu needs to be a container-fluid.
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container-fluid">
You need to make your container class have auto width for small screen sizes, otherwise it pushes the hamburger button off the screen. A bit of CSS with a media query can achieve this.
#media(max-width: 767px) {
.container {
width: auto;
}
}
Bootstrap Navbar Documentation
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
#media(max-width: 767px) {
.container {
width: auto;
}
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<!-- 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 navbar-left" href="#">PAGE NAME</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 navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>