I've just started out with webdev and I have a problem with my navbar. It only sends you to the corresponding sub-site when clicked directly on the icon or the writing. I'd like it to behave like a button as a whole. I have spent a good few hours searching the net and looking at the problem from different angles but i still can't find a solution. Here's the navbar
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #222;
position: fixed;
top: 0px;
width: 120px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
}
.nav-side-menu .toggle-btn {
display: none;
background-color: #222;
color: #222;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 50px;
cursor: pointer;
vertical-align: center;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #00ACDD;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #00ACDD;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #00ACDD;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #ffffff;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
text-align: center;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
vertical-align: center;
}
.nav-side-menu li:hover {
border-left: 3px solid #00ACDD;
background-color: #000000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #222;
color: #00ACDD;
width: 40px;
text-align: center;
}
.brand {
text-align: center !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
background: url(graphics/clouds5.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
padding: 0px;
overflow-x: hidden;
}
.navbar-icon {
font-size:36px;
margin-top:10%;
}
#media (max-width: 767px) {
.topnavbutton-mobile{
padding-left: 0px;
border-left: 3px solid #2e353d;
border-top: 1px solid #00ACDD;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
</head>
<div class="nav-side-menu">
<img src="graphics/Icon.png" style="width:40px;padding-top:10px;padding-bottom:10px;display:block;margin-left:auto;margin-right:auto">
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li class="topnavbutton-mobile">
<a href="index.html">
<i class="fa fa-home navbar-icon"></i>
<h6 style="padding-top:0px;margin-top:0px;padding-bottom:10px">PLACEHOLDER</h6>
</a>
</li>
<li class="topnavbutton-mobile">
<a href="#">
<i class="fa fa-shopping-cart navbar-icon"></i>
<h6 style="padding-top:0px;margin-top:0px;padding-bottom:10px">PLACEHOLDER</h6>
</a>
</li>
<li class="topnavbutton-mobile">
<a href="signup.html">
<i class="fa fa-user-o navbar-icon"></i>
<h6 style="padding-top:0px;margin-top:0px;padding-bottom:10px">PLACEHOLDER</h6>
</a>
</li>
<li class="topnavbutton-mobile">
<a href="builder.html">
<i class="fa fa-wrench navbar-icon"></i>
<h6 style="padding-top:0px;margin-top:0px;padding-bottom:10px">PLACEHOLDER</h6>
</a>
</li>
<li class="topnavbutton-mobile">
<a href="#">
<i class="fa fa-envelope-o navbar-icon"></i>
<h6 style="padding-top:0px;margin-top:0px;padding-bottom:10px">PLACEHOLDER</h6>
</a>
</li>
</ul>
</div>
</div>
Add display:block to your <a> tags in CSS or with inline style attitude.
Related
I made a simple dropdown menu.When I hover "Social Media" section ,I want to show some social icon like a dropdown menu.I made those social media icon part hidden . And I want to make it visible only during to hover on "social media" part.But it is not working.The icon part is not shown after hover.Please help me out.I couldn't not be able to find my problem.
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<link rel="stylesheet" href="./menu.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<div class="main-menu">
<ul>
<li>Home
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
<li>Register</li>
</ul>
</div>
<div class="social">
<ul>
<li>Social Media
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.main-menu{
background: black;
}
.main-menu ul {
text-align: center;
}
.main-menu ul li {
display: inline-block;
position: relative;
}
.main-menu ul li a {
color: white;
text-decoration: none;
padding: 15px 56px;
margin-left: -5px;
border-left:1px rgb(70, 67, 67) solid;
display: inline-block;
font-family: 'Lato', sans-serif;
}
.main-menu ul li :last-child{
border-right:1px rgb(70, 67, 67) solid;
}
.main-menu ul li:hover>a{
background-color: rgb(70, 67, 67);
transition: .5s;
}
/* dropdown menu*/
.main-menu ul li ul{
position: absolute;
left: -4px;
top:100%;
width: 300px;
background: black;
visibility: hidden;
opacity: 0;
transform: scaley(0);
transform-origin: top;
}
.main-menu ul li ul li{
display: block;
padding-left: 5px;
}
.main-menu ul li ul li a{
display: block;
border:none;
border-bottom: 1px solid rgb(70, 67, 67);
}
.main-menu ul li ul li:last-child{
border-right: none;
}
/* hover style */
.main-menu ul li:hover ul{
visibility: visible;
opacity: 1;
transition: .5s;
transform: scaley(1);
}
/* social media */
.social{
text-align: center;
margin-top: 50px;
}
.social ul{
list-style: none;
display: inline-block;
}
.social ul li{
height: 42px;
width:225px;
background-color: black;
border-radius: 35px;
position: relative;
}
.social ul li a{
text-decoration: none;
color: white;
font-family: 'Lato', sans-serif;
font-size: 35px;
}
.social ul li:hover{
background-color: rgb(114, 114, 114);
transition: .5s;
}
/* dropdown */
.social ul li ul{
position: absolute;
top: 140%;
left: -145px;
width: 500px;
visibility: hidden;
opacity: 0;
}
.social ul li ul li{
display: inline-block;
height: 80px;
width: 80px;
line-height: 80px;
border-radius: 50%;
margin-left: 22px;
}
.social ul li ul li a{
font-size: 45px;
color: white;
padding:0px;
}
/* hover */
.social ul li :hover .social ul li ul{
visibility: visible;
opacity: 1;
}
Here you go. You were using hover part as .social ul li:hover .social ul li ul whereas it should be like .social:hover ul li ul
* {
margin: 0;
padding: 0;
}
.main-menu {
background: black;
}
.main-menu ul {
text-align: center;
}
.main-menu ul li {
display: inline-block;
position: relative;
}
.main-menu ul li a {
color: white;
text-decoration: none;
padding: 15px 56px;
margin-left: -5px;
border-left: 1px rgb(70, 67, 67) solid;
display: inline-block;
font-family: 'Lato', sans-serif;
}
.main-menu ul li :last-child {
border-right: 1px rgb(70, 67, 67) solid;
}
.main-menu ul li:hover>a {
background-color: rgb(70, 67, 67);
transition: .5s;
}
/* dropdown menu*/
.main-menu ul li ul {
position: absolute;
left: -4px;
top: 100%;
width: 300px;
background: black;
visibility: hidden;
opacity: 0;
transform: scaley(0);
transform-origin: top;
}
.main-menu ul li ul li {
display: block;
padding-left: 5px;
}
.main-menu ul li ul li a {
display: block;
border: none;
border-bottom: 1px solid rgb(70, 67, 67);
}
.main-menu ul li ul li:last-child {
border-right: none;
}
/* hover style */
.main-menu ul li:hover ul {
visibility: visible;
opacity: 1;
transition: .5s;
transform: scaley(1);
}
/* social media */
.social {
text-align: center;
margin-top: 50px;
}
.social ul {
list-style: none;
display: inline-block;
}
.social ul li {
height: 42px;
width: 225px;
background-color: black;
border-radius: 35px;
position: relative;
}
.social ul li a {
text-decoration: none;
color: white;
font-family: 'Lato', sans-serif;
font-size: 35px;
}
.social ul li:hover {
background-color: rgb(114, 114, 114);
transition: .5s;
}
/* dropdown */
.social ul li ul {
position: absolute;
top: 140%;
left: -145px;
width: 500px;
visibility: hidden;
opacity: 0;
}
.social ul li ul li {
display: inline-block;
height: 80px;
width: 80px;
line-height: 80px;
border-radius: 50%;
margin-left: 22px;
}
.social ul li ul li a {
font-size: 45px;
color: white;
padding: 0px;
}
/* hover */
.social:hover ul li ul {
visibility: visible;
opacity: 1;
}
<div class="main-menu">
<ul>
<li>Home
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
<li>Register</li>
</ul>
</div>
<div class="social">
<ul>
<li>Social Media
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
</li>
</ul>
</div>
Working Fiddle
Change you last css selector with this
/* hover */
.social:hover ul li ul{
visibility: visible;
opacity: 1;
}
Although you will now run into the problem that you cant click the icons since they have position: absolute; if you try to hover over them the hover on .social will get removed
I'm building a navigation bar and the code if fine in the desktop mode.
When I'm using media queries for mobile, the hover effects are the same in the media query as in the desktop version. I don't know what I'm doing wrong or how to fix it.
background: #232323;
height: 66px;
color: #ffff;
box-shadow: 2px 2px 5px green;
position: fixed;
width: 100%;
}
header .logo {
float: left;
height: inherit;
margin-left: 3em;
margin-bottom: 3em;
text-shadow: 2px 2px 2px black;
}
header .logo-text {
margin: 8px;
}
header .logo-text span {
color: #cfe333;
font-family: 'Abril Fatface', cursive;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative
}
header ul li ul {
position: absolute;
top: 66px;
right: 0px;
width: 180px;
display: none;
}
header ul li ul li {
width: 100%;
background: #cfe333;
}
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
}
header ul li {
display: block;
padding: 21px;
font-size: 1.1em;
}
header ul li:hover {
background: #010101;
color: #cfe333;
}
header ul li a:hover {
color: #cfe333;
transition: 0.5s;
}
header .menu-toggle {
display: none;
}
header ul li a {
text-decoration: none;
color: #fff;
font-size: 1.2em;
text-shadow: 2px 2px 2px black;
}
.fas fa-bars menu-toggle {
color: white;
}
/* Media Queries */
#media only screen and (max-width: 750px) {
header ul {
width: 100%;
background: #232323;
font-size: .8em;
margin-top: 0;
position: absolute;
top: 68px;
}
header ul li {
width: 100%;
}
header ul li ul {
position: static;
display: block;
width: 100%;
left: 0;
margin-top: 30px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
width: 100%;
}
header ul li ul li a:hover {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1 class="logo-text"><span>IM</span> Learning Project</h1>
<link rel="stylysheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity=""
crossorigin="anonymous">
</div>
<i class="fas fa-bars menu-toggle"></i>
<ul class="nav">
<li><i class="far fa-star"></i> Rewards</li>
<li><i class="fas fa-user-friends"></i> Connect</li>
<li><i class="fas fa-video"></i> Watch</li>
<li>
<i class="fas fa-user"></i> Sign Up <i class="fas fa-chevron-down" style="font-size: .8em;"></i>
<ul>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</li>
</ul>
</header>
What I'm trying to do with this code is have the list items stay the full width on hover also, for the media query.
Thanks in advance for your help!
I solved it by putting a media query on this:
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
}```
i'm getting expended menu bar with subitems when i run my jsp file and even it is not collapsing on click mean no response from the menu bar i already tried different ways to resolve this issue but unable to resolve.
HTML
<link
href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
rel="stylesheet">
<div class="nav-side-menu">
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li><a href="#"> <i class="fa fa-home fa-lg"></i>
Home
</a></li>
<li data-toggle="collapse" data-target="#products"
class="collapsed active"><a><i
class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="products">
<li>CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<a><i class="fa fa-globe fa-lg"></i> Services <span
class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<a><i class="fa fa-bus fa-lg"></i> New <span
class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li><a href="#"> <i class="fa fa-user fa-lg"></i> Profile
</a></li>
<li><a href="#"> <i class="fa fa-users fa-lg"></i> Users
</a></li>
</ul>
</div>
</div>
css for nav
CSS
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 24%;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul, .nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
}
.nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before
{
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active, .nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active
{
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a
{
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover
{
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before
{
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media ( max-width : 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media ( min-width : 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
Does anybody know what the problem is and how I can fix it?
please leave your valuable answer and comments.
Not sure whether it's correct workaround for your issue, I have added jQuery function to enable the toggle. Let me know if this helps.
$(".collapsed").click(function(){
$($(this).data("target")).toggle('slow');
});
Please find the updated Fiddle for demo.
How can I make other slide-down menus close when clicking on another menu item? Right now all menu items are opening one by one and they can only be closed by clicking on the item again.
Here's a demo: http://bootsnipp.com/snippets/33qKz
And here's the code
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
/* Adding gvnix styles css - NO COPIAR */
#import 'http://geo-gvnix.rhcloud.com/resources/styles/standard.css';
/* Custom fixed navs */
header.navbar+nav.navbar {
/* margin-top: 20px;same margin-bottom .navbar */
}
.navbar.navbar-default.navbar-fixed-top {
margin-top: 50px;
}
.sidebar.navbar-fixed-top {
margin-top: 100px;
}
#media (min-width: 768px) and (max-width: 998px) {
.navbar.navbar-default.navbar-fixed-top {
margin-top: 100px;
}
.sidebar.navbar-fixed-top {
margin-top: 150px;
}
}
/* Custom navbar default: global*/
.navbar.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
margin: 0;
border-radius: 0;
}
.navbar.navbar-default .navbar-brand {
color: #666;
text-shadow: none;
min-width: 150px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a:hover {
color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a {
color: #fff;
background-color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a:hover {
color: #608224;
background-color: #acc47f;
}
.navbar.navbar-default .caret {
border-top-color: #ccc;
border-bottom-color: #ccc;
}
.navbar.navbar-default .caret:hover {
border-top-color: #333;
border-bottom-color: #333;
}
/* Custom sidebar menu */
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar,
.main {
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main {
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
#media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main {
position: absolute;
width: calc(100% - 40px);
/*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main {
margin-left: 200px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand,
nav.sidebar .navbar-header {
text-align: center;
width: 100%;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a {
padding-right: 13px;
min-width: 100px;
}
/*custom sidebar nav*/
nav.sidebar ul.nav.navbar-nav {
margin: 0;
}
nav.sidebar.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: white;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child {
border-top: 1px #e5e5e5 solid;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li {
border-bottom: 1px #e5e5e5 solid;
}
/*adds background on hover*/
nav.sidebar .navbar-nav > li:hover {
color: #fff;
background-color: #43600E;
}
/*removes border last element*/
nav.sidebar .navbar-nav > li.last {
border-bottom: none;
}
/* Colors/style dropdown box*/
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*allows nav box to use 100% width*/
nav.sidebar .navbar-collapse,
nav.sidebar .container-fluid {
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*O quanto o menu irá esconder á esquerda*/
/*gives sidebar width/height*/
nav.sidebar {
width: 200px;
height: 100%;
margin-left: -270px;
float: left;
z-index: 8000;
margin-bottom: 0px;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover {
margin-left: 0px;
}
/*for hiden things when navbar hidden*/
.forAnimate {
opacity: 0;
}
}
/* .....NavBar: Fully showing nav bar..... */
#media (min-width: 1330px) {
/* Allow main to be next to Nav
.main{
width: calc(100% - 200px); keeps 100% minus nav size
margin-left: 200px;
}
Show all nav
nav.sidebar{
margin-left: 0px;
float: left;
}
Show hidden items on nav
nav.sidebar .forAnimate{
opacity: 1;
} */
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover,
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate {
opacity: 1;
}
/*---- FIM SLIDE MENU*/
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--nav sidebar -->
<aside>
<nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <i class="fa fa-gift fa-lg btn pull-right" style="margin-top:5px"></i>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation
</li>
<li>General
</li>
<li>Buttons
</li>
<li>Tabs & Accordions
</li>
<li>Typography
</li>
<li>FontAwesome
</li>
<li>Slider
</li>
<li>Panels
</li>
<li>Widgets
</li>
<li>Bootstrap Model
</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>
</nav>
</aside>
<div class="main">
</div>
Your HTML structure is not quite what Bootstrap expects and you won't be able to use the easy way of data-parent attribute on this structure (the items should be divs and have the class panel anyway). Please see documentation for more info if interested. But for your problem and something you can make work directly into your HTML. I added toggle-this class to all the parent menu items which are toggled and added the attribute data-parent="menu-content" to them also. Then I just use this jQuery function to see if there are any menus expanded on click and collapse all the other than the one just clicked like this:
$(document).on('click', '.toggle-this', function(event) {
event.stopPropagation();
var $this = $(this);
var parent = $this.data('parent');
var actives = $('#' + parent).find('[aria-expanded="true"]');
if (actives && actives.length) {
hasData = actives.data('collapse');
actives.collapse('hide');
}
var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7
$(target).collapse('toggle');
});
Here's a working JSFiddle: https://jsfiddle.net/thepio/x5j6v5fq/
Your html does not follow the documentation from bootstrap.
The right structure should be something like this:
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
UI Elements <span class="caret"></span>
<ul class="dropdown-menu">
<li>CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
...
</ul>
</li>
...
</ul>
I relize that this would mean you have to re-style some parts of your navigation, but it gives you the functionality that you want.
For more information check bootstraps documentation about navbars
Alternative you can make a little script to change/remove classes on the opened menu items when you click a new one.
I am trying to make a website but i stumbled upon a little problem i am using a snippet from the bootsnipp (a side menu) i can't get it working so the link will cover the whole LI instead that you have to press the text it self
if i change it so the will sit before the li it looks off
how can i fix this
Link to snip: http://bootsnipp.com/snippets/featured/responsive-navigation-menu
My code:
HTML:
<div class="nav-side-menu" style="float: left; position: fixed; width: 15.6%;">
<div class="brand"><img alt="Brand" src="includes/img/LogoTest1.png" width="10%"> <b>Craft-List.net</b></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li class="active"><i class="glyphicon glyphicon-home"></i> Home</li>
<li class=""><i class="glyphicon glyphicon-user"></i> Members</li>
<li class=""><i class="glyphicon glyphicon-envelope"></i> Contact</li>
<li class=""><i class="glyphicon glyphicon-question-sign"></i> About</li>
<li class=""><i class="glyphicon glyphicon-plus"></i> Login/Register</li>
</ul>
</div>
CSS:
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
The reason why i am asking it here is because that snip looked a bit dead and old lastest comment was 4 months ago.
also i am fairly new to css & html i code more php than design stuff :| anyhow i'd love to see something with a example if that's aksed too mutch plain text will work
Thanks in advance!
I think you will have to put a display: block; to the a element, wich has display: inline; as default.
.nav-side-menu li a {
display: block;
}
Your li elements have a very thick border of 3px colored #D19B3D. Just taking this border out and making the anchor tag 'display:block should help you achieve what you are looking for.
Just for the sake of clarity, I have added a hover effect on the anchor element to show you that the anchor does span the complete width of the li.
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
display: block;
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a:hover {
background-color: orange;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<div class="nav-side-menu" style="float: left; position: fixed; width: 15.6%;">
<div class="brand"><img alt="Brand" src="includes/img/LogoTest1.png" width="10%"> <b>Craft-List.net</b></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li class="active"><i class="glyphicon glyphicon-home"></i> Home</li>
<li class=""><i class="glyphicon glyphicon-user"></i> Members</li>
<li class=""><i class="glyphicon glyphicon-envelope"></i> Contact</li>
<li class=""><i class="glyphicon glyphicon-question-sign"></i> About</li>
<li class=""><i class="glyphicon glyphicon-plus"></i> Login/Register</li>
</ul>
</div>
Hope this helps!!!