I'm trying to style a select dropdown menu in order to overflow when arriving to 150px height. The problem is that when I apply the overflow: auto property, the after pseudoelement containing an arrow pointing to the select disappears.
Here we've the code:
.dropdown-menu{
background-color:#f2f2f1;
min-width: 100px;
border:none;
border-top:5px solid #b4b4b4;
border-radius:0;
>li>a{
font-size: 14px !important;
color:#818181 !important;
&:hover, &:active{
color:#003e59 !important;
}
}
.divider{
height:2px;
margin: 2px 0;
background-color:#cdcccd;
}
&:after {
bottom: 100%;
left: 25%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #b4b4b4;
border-width: 12px;
margin-left: -12px;
}
}
<div class="input-group">
<label>Jurisdiction</label>
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Jurisdiction <span class="spacer"></span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Jurisdiction 1</li>
<li class="divider"></li>
<li>Jurisdiction 2</li>
<li class="divider"></li>
<li>Jurisdiction 3</li>
</ul>
</div>
Related
I have made this concept: https://codepen.io/andrelange91/pen/yLpJRRw?editors=1100
In it, I have a bell icon which when pressed shows a dropdown with notifications.
But, depending on the screensize its never really placed with the arrow on the dropdown pointing at the middle of the bell icon..
How can i accomplish this?
I'm a bit rusty when it comes to frontend programming, and I haven't been able to find any suitable solutions when researching it.
HTML
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item notification-wrapper">
<button class="notification-button">
<i class="fas fa-bell"></i>
<span>6</span>
</button>
<div class="notification-popup">
<div class="notification-popup__header">
<h3>Notifikationer</h3>
<button title="marker alle som læst"><i class="fa-solid fa-check"></i></button>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<nav>
</nav>
Styling
$clr-white-1: #ecf0f1;
$clr-white-2: darken($clr-white-1, 5%);
$clr-t300: #444;
$clr-t500: #95a5a6;
$clr-p300: #111;
$clr-a300: #e74c3c; //#FF6A6A; //salmon
$container-shadow: 0.5rem 0.5rem 2rem 0 rgba(black, 0.2);
$h-gutter: 2rem;
$v-gutter: 0.75rem;
body {
padding: 5% 0;
margin: 0 0 50px 0;
box-sizing: border-box;
width: 100vw;
height: 100vh;
background: $clr-white-1;
background: linear-gradient(30deg, $clr-white-2, $clr-white-1);
font-family: "Lato", Arial, sans-serif;
font-weight: 500;
letter-spacing: 0.05rem;
nav {
position: absolute;
left: 500px;
}
}
.notification-wrapper {
position: relative;
}
button.notification-button {
position: relative;
margin-right: 1em;
border-radius: 5px;
background: none;
border: none;
i {
margin: 0.5rem;
}
&:nth-of-type(1) {
i {
background: -webkit-linear-gradient(300deg, #acccea, #6495ed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&:nth-of-type(2) i {
background: -webkit-linear-gradient(300deg, #fff9ab, #00b8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
svg,
.fa-bell {
color: white;
font-size: 28px;
}
span {
position: absolute;
user-select: none;
cursor: default;
font-size: 0.6rem;
background: $clr-a300;
width: 1.2rem;
height: 1.2rem;
color: $clr-white-1;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
top: -0.33rem;
right: 0;
box-sizing: border-box;
animation-name: scaleCount;
animation-iteration-count: 1;
animation-timing-function: all;
animation-duration: 1s;
animation-delay: 0s;
#keyframes scaleCount {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
60% {
transform: scale(0.5);
}
80% {
transform: scale(1.25);
}
}
}
}
.notification-popup {
display: none;
&.active {
display: block;
}
&:before {
// triangle
content: "";
position: absolute;
top: 1px;
right: 0;
width: 0;
height: 0;
transform: translate(-1rem, -100%);
border-left: 0.75rem solid transparent;
border-right: 0.75rem solid transparent;
border-bottom: 0.75rem solid white;
}
cursor: default;
position: absolute;
z-index: 999;
top: 56px;
left: -210px;
width: 400px;
font-weight: 300;
background: white;
border-radius: 0.5rem;
box-sizing: border-box;
box-shadow: $container-shadow;
animation-name: dropPanel;
animation-iteration-count: 1;
animation-timing-function: all;
animation-duration: 0.75s;
&__header {
h3 {
text-transform: uppercase;
font-size: 75%;
font-weight: 700;
color: #84929f;
padding: $v-gutter * 2 $h-gutter;
display: inline-block;
}
button {
float: right;
border: none;
background: none;
i {
text-transform: uppercase;
font-size: 22px;
font-weight: 700;
padding: $v-gutter * 2 $h-gutter;
color: #84929f;
}
}
}
.notification-item {
border-bottom: 2px solid lightgrey;
display: block;
overflow: hidden;
width: 100%;
padding: 10px 0;
ul {
li {
float: left;
list-style: none;
padding: 5px;
position: relative;
&:first-child {
i {
font-size: 22px;
}
}
&:last-child {
right: $h-gutter;
margin-left: $v-gutter;
float: right;
}
button {
&:hover {
opacity: 0.8;
cursor: pointer;
}
span {
color: #b5c4d2;
font-size: 140%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
}
background: none;
border: none;
}
}
}
}
}
#keyframes dropPanel {
0% {
opacity: 0;
transform: translateY(-100px) scaleY(0.5);
}
}
And for completeness sake my js
$(".notification-button").on("click", function () {
const ele = $(".notification-popup");
if (ele.hasClass("active")) {
console.log("remove active");
ele.removeClass("active");
} else {
console.log("add active");
ele.addClass("active");
}
});
document.addEventListener(
"click",
function (event) {
// If user either clicks X button OR clicks outside the modal window, then close modal by calling closeModal()
if (
event.target.closest(".notification-button") == null &&
event.target.closest(".notification-popup") == null
) {
console.log("remove active click outside");
$(".notification-popup").removeClass("active");
}
},
false
);
Don't position the popup with a negative left value, but use right: 50%; instead. That gets you the right corner aligned to the middle of the li that contains the button.
And then add transform: translateX(20px); to compensate for about half of the button width. Or use translateX(1.25em) if you want to keep it dynamic regarding font size.
Try using .notification-popup{ transform: center top; }
I have a collapsible sidebar. On click of a link from the sidebar, I want to display the components next to the sidebar but they show below it.
My Component Code:
<app-topbar></app-topbar>
<div class="wrapper">
<app-sidebar></app-sidebar>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets/bn.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
My Component's CSS:
.navbar{
background-color: #1F85DE;
}
.card{
flex: auto;
}
My Sidebar Component's HTML:
<nav id="sidebar" class="navbar-dark bg-#1F85DE" style="background-color: #1F85DE;" [ngClass]="{'hidden': sideNavService.hideSideNav }">
<hr>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home Page</a>
<hr>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
<hr>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
<hr>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
<hr>
</li>
</ul>
</nav>
My Sidebars's CSS:
:host {
background: #343a40;
}
#sidebar {
min-width: 200px;
max-width: 200px;
min-height: 100vh;
color: #fff;
transition: all 0.3s;
font-weight: 300;
font-size: 1rem;
line-height: 1.5;
}
#sidebar.hidden {
margin-left: -200px;
}
a[data-toggle="collapse"] {
position: relative;
}
#media (max-width: 575px) {
#sidebar {
margin-left: -200px;
}
#sidebar.hidden {
margin-left: 0;
}
}
a, a:hover, a:focus {
color: inherit;
}
#sidebar .sidebar-header {
padding: 20px;
}
#sidebar ul li a {
padding: 15px;
display: block;
width: 100%;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
hr {
border-top: 1px solid #fff;
margin-top: 0;
}
.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;
}
The code is making my Sidebar appear on the left side but the component that I want to display is not occupying the empty save on the right of the sidebar instead, after the sidebar ends, its occupying the save there.
<ng-sidebar-container>
<ng-sidebar [opened]="opened" position="right" mode="push" autoCollapseWidth=100>
<img src="assets/myimage_compressed.jpg" class="rounded-circle" width=80 height=80/>
<ul class="menu">
<li> <a routerLink="/">Dash Board</a></li>
<li> <a routerLink="/post">Post</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</ng-sidebar>
<div ng-sidebar-content>
<!-- side page component ,Here i have used main component -->
<app-main></app-main>
</div>
</ng-sidebar-container>
originally i have a progress bar/tab of 4 but i decided to add 1 more, but when i added up the code for the fifth 'tab.' it won't align with the other 4 instead it goes below first 'tab.' question is, how can i make the fifth tab aligned/inline with the other four tabs?
original preview
updated preview
here's the html:
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" style="pointer-events: none; cursor: default;">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" style="pointer-events: none; cursor: default;">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" style="pointer-events: none; cursor: default;">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step4" role="tab" style="pointer-events: none; cursor: default;">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" style="pointer-events: none; cursor: default;">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
CSS:
.wizard {
margin: 20px auto;
background: #fff;
width: 90%;
margin-top: -20px;
margin-left: 85px;
}
.wizard .nav-tabs {
position: relative;
margin: 4px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
margin-right:90px;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 100%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #FFA53E;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#FFA53E;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #F86D18;
}
.wizard li.active span.round-tab i{
color: #F86D18;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #F86D18;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
margin-right:-10px;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #F86D18;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
Your li elements are set to 1/4 of width and you are trying to put 5 elements.
Try:
.wizard .nav-tabs > li {
width: 20%;
}
I create menu with dropdown-submenu.
.dropdown-menu {
float:left;
}
.left-submenu {
float: none;
}
.left-submenu > .dropdown-menu {
border-radius: 6px 0px 6px 6px;
left: auto;
margin-left: 10px;
right: 98%;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something that is a really really really long string here</a></li>
<li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">Try left</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">shorter things</a></li>
<li><a tabindex="-1" href="#">shorter things</a></li>
<li><a tabindex="-1" href="#">shorter things</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">More else</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
How to change side and direction arrow in dropdown-submenu "Try left"?
Demo here http://jsfiddle.net/5BUXu/20/
p.s. Want to get same result on picture
You just need to 'flip the script'. The arrow is in an :after in the bootstrap CSS, you need to rewrite that, flip all that makes it appear right, like this:
.dropdown-submenu>a:after {
display: block;
content: " ";
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 5px 5px 0;
border-right-color: #cccccc;
margin-top: 5px;
margin-left: -10px;
}
JSFiddle
So the float is now left instead of right, the border-right-width is now 5px instead of the border-left-width, and the margin-right is now margin-left.
For one item to have a left-arrow and one item to have a right arrow you either need to add a class or when you know the amount of items is fixed, you can work with nth-child selector. Like this:
With class added
<li class="dropdown-submenu right-submenu"> <a tabindex="-1" href="#">
.dropdown-submenu.right-submenu>a:after {
display: block;
content: " ";
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 5px 5px 0;
border-right-color: #cccccc;
margin-top: 5px;
margin-left: -10px;
}
With nth-child selector
.dropdown-submenu:nth-child(4)>a:after {
display: block;
content: " ";
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 5px 5px 0;
border-right-color: #cccccc;
margin-top: 5px;
margin-left: -10px;
}
how to center dropdown navbar, and make it still responsive?
i already try almost every method i found on this site, and internet, but still cant fix my problem, 1 method almost fix my problem but make my nav bar not responsive
body {
color: #ffffff;
background-color: #000000;
}
h1 {
color: white;
font-family: "orator std";
font-size: 44px;
letter-spacing: 0px;
line-height: 8px;
}
h2 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
line-height: 1px;
}
h3 {
color: white;
font-family: "orator std";
font-size: 14px;
letter-spacing: 1px;
margin-right: 100px;
margin-left: 100px;
}
h4 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
text-align: center;
}
h5 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
}
.thumbnail {
color: white;
background-color: #414141;
border-color: rgb(44, 44, 44);
}
.thumbnail .caption {
padding: 9px;
color: white;
margin-top: -14px;
}
.navbar-brand {
margin-top: 15px;
max-width: 30px;
padding: 0;
max-height: 30px;
}
.img-responsive {margin:0 auto;
}
.btn {
color: #ffffff;
text-align: center;
}
.btn:active {
color: red !important;
}
.btn:hover {
color: #8E8E8E;
}
.navbar {
border-radius: 0px;
border-width: 0px;
margin-top: 20%;
font-family: "Orator Std";
font-size: 18px;
color: #ffffff;
background-color: #000000;
vertical-align: center;
text-align: center;
margin-top: 0%;
}
.navbar li a {
color: #ffffff !important;
}
.navbar li a:hover {
color: gray !important;
}
.navbar-inner, .navbar .btn-navbar {
background: #ffffff
}
.navbar-inverse .navbar-nav>li>a {
border-bottom: white !important;
border-radius: 5px !important;
}
.dropdown-menu {
color: #ffffff;
background-color: #000000;
}
.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: -5px;
}
.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;
}
#media screen and (max-width: 768px) {
.navbar .navbar-collapse a {
text-align: left;
padding-left: 43%;
}
.dropdown-submenu a {
padding-left: 44%;
}
.navbar .navbar-collapse .dropdown .dropdown-menu a {
padding-left: 45%;
}
}
#the-slider img{
width: 100%;
padding-left: 10%;
padding-right: 10%;
padding-top: 10%;
}
.navbar-nav li{
position: relative
}
.navbar-nav li:not(:last-child):after{
content: '';
position: absolute;
right: 0px;
width: 1px;
height: 50%;
top: 20%;
background: white;
}
.dropdown-menu li:not(:last-child):after{
content: '';
position: absolute;
right: 0px;
width: 0px;
height: 50%;
top: 20%;
background: red;
}
<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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse"> <!-- start navigation button -->
<!-- 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>
<img src="images/logonav1.png">
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li class="#"><B><I>Home</B></I>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><B><I>Collection </B></I><b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><i class="fa fa-envelope-o fa-fw"></i><B><I>All Collection Portfolio</B></I>
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i>Collection 1
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i>Collection 2
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i>Collection 3
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i>Cita Tenun Indonesia
</li>
</ul>
</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><i class="fa fa-calendar-o fa-fw"></i> Account
</li>
<li><i class="fa fa-folder-open-o fa-fw"></i> Users
</li>
<li><i class="fa fa-file-o fa-fw"></i> Login
</li>
</ul>
</li>
</li>
</ul>
<li>About
</li>
<li>Contact us
</li>
</li>
</ul>
</ul>
</div>
</nav> <!-- end navigation button-->
<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
The problem is that Boostrap sets the navbar-nav and navbar-nav li elements to float: left;, so it forces both to align left.
You'd need to override the Bootstrap styles for the min-width: 768px media query by setting the float property to none !important on those selectors, and add display: inline-block !important; to the navbar-nav element.
You need to use the media query in order to apply the changes only when the viewport is 768px or bigger.
The CSS rules you need to add to your stylesheet should look like this:
#media (min-width: 768px) {
.navbar-nav > li {
float: none !important;
display: inline-block !important;
}
.navbar-nav {
float: none !important;
}
}
And applied to the HTML:
body {
color: #ffffff;
background-color: #000000;
}
h1 {
color: white;
font-family: "orator std";
font-size: 44px;
letter-spacing: 0px;
line-height: 8px;
}
h2 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
line-height: 1px;
}
h3 {
color: white;
font-family: "orator std";
font-size: 14px;
letter-spacing: 1px;
margin-right: 100px;
margin-left: 100px;
}
h4 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
text-align: center;
}
h5 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
}
.thumbnail {
color: white;
background-color: #414141;
border-color: rgb(44, 44, 44);
}
.thumbnail .caption {
padding: 9px;
color: white;
margin-top: -14px;
}
.navbar-brand {
margin-top: 15px;
max-width: 30px;
padding: 0;
max-height: 30px;
}
.img-responsive {
margin: 0 auto;
}
.btn {
color: #ffffff;
text-align: center;
}
.btn:active {
color: red !important;
}
.btn:hover {
color: #8E8E8E;
}
.navbar {
border-radius: 0px;
border-width: 0px;
margin-top: 20%;
font-family: "Orator Std";
font-size: 18px;
color: #ffffff;
background-color: #000000;
vertical-align: center;
text-align: center;
margin-top: 0%;
}
.navbar li a {
color: #ffffff !important;
}
.navbar li a:hover {
color: gray !important;
}
.navbar-inner,
.navbar .btn-navbar {
background: #ffffff
}
.navbar-inverse .navbar-nav>li>a {
border-bottom: white !important;
border-radius: 5px !important;
}
.dropdown-menu {
color: #ffffff;
background-color: #000000;
}
.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: -5px;
}
.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;
}
#media screen and (max-width: 768px) {
.navbar .navbar-collapse a {
text-align: left;
padding-left: 43%;
}
.dropdown-submenu a {
padding-left: 44%;
}
.navbar .navbar-collapse .dropdown .dropdown-menu a {
padding-left: 45%;
}
}
#the-slider img {
width: 100%;
padding-left: 10%;
padding-right: 10%;
padding-top: 10%;
}
.navbar-nav li {
position: relative
}
.navbar-nav li:not(:last-child):after {
content: '';
position: absolute;
right: 0px;
width: 1px;
height: 50%;
top: 20%;
background: white;
}
.dropdown-menu li:not(:last-child):after {
content: '';
position: absolute;
right: 0px;
width: 0px;
height: 50%;
top: 20%;
background: red;
}
#media (min-width: 768px) {
.navbar-nav > li {
float: none !important;
display: inline-block !important;
}
.navbar-nav {
float: none !important;
}
}
<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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse">
<!-- start navigation button -->
<!-- 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>
<a href="index.html" class="pull-left">
<img src="images/logonav1.png">
</a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li class="#"><B><I>Home</B></I>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><B><I>Collection </B></I><b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><i class="fa fa-envelope-o fa-fw"></i><B><I>All Collection Portfolio</B></I>
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i>Collection 1
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i>Collection 2
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i>Collection 3
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i>Cita Tenun Indonesia
</li>
</ul>
</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><i class="fa fa-calendar-o fa-fw"></i> Account
</li>
<li><i class="fa fa-folder-open-o fa-fw"></i> Users
</li>
<li><i class="fa fa-file-o fa-fw"></i> Login
</li>
</ul>
</li>
</li>
</ul>
<li>About
</li>
<li>Contact us
</li>
</li>
</ul>
</ul>
</div>
</nav>
<!-- end navigation button-->
<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>