Is there a way to adjust the drop-down menu to be centered when the screen size is reduced? I'm having trouble accessing the drop-down menu because it's not in the middle.
Please excuse any mistakes in my English and coding
Here is the code:
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}If this helps,
<!DCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>Lycka City</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="css/custom.css" rel="stylesheet"> <script src="js/respond.js"></script> <style> .navbar { margin-top: 10%; </style> </head> <body> <div class="navbar navbar-default row"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="collapse"> <ul class="nav nav-justified"> <li class=><a href="">Home</a></li> <li class="dropdown"><a data-toggle="dropdown" href="#">About <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </li> </ul> </div> </div> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>