I used <div id="mws-nav-collapse"> for responsiveness; it worked.
Now I don't need responsiveness, so when I delete this div, I didn't view my nav-bar items in mobile view. How do I make my nav-bar items visible in the mobile view without using responsiveness.
Here is my code:
<div id="mws-navigation">
<ul id="link">
<li data-related="c" class="" id="c1"><i class="icon-calendar"></i>AAA</li>
<li data-related="e" class="" id="e1"><i class="icon-tag"></i>BBB</li>
<li data-related="f" class="" id="f1"><i class="icon-hdd"></i>CCC</li>
</ul>
</div>
the div which i removed
<div id="mws-nav-collapse">
<span></span>
<span></span>
<span></span>
</div>
It is available in bootstrap docs
What changes
Note the lack of the <meta name="viewport" content="width=device-width, initial-scale=1">, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.
Regarding navbars
As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar.
Browsers, scrolling, and fixed elements
Non-responsive layouts highlight a key drawback to fixed elements. Any fixed component, such as a fixed navbar, will not be scrollable when the viewport becomes narrower than the page content. In other words, given the non-responsive container width of 970px and a viewport of 800px, you'll potentially hide 170px of content.
There is no way around this as it's default browser behavior. The only solution is a responsive layout or using a non-fixed element.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Non-responsive Template for Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="non-responsive.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
The text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
non-responsive.css
body {
padding-top: 70px;
padding-bottom: 30px;
}
body,
.navbar-fixed-top,
.navbar-fixed-bottom {
min-width: 970px;
}
.lead {
font-size: 16px;
}
.page-header {
margin-bottom: 30px;
}
.page-header .lead {
margin-bottom: 10px;
}
.container {
width: 970px;
max-width: none !important;
}
.col-xs-4 {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
.container .navbar-header,
.container .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
.navbar-header {
float: left;
}
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}
.navbar-brand {
margin-left: -15px;
}
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding: 15px;
}
.navbar-nav.navbar-right {
float: right;
}
.navbar .navbar-nav .open .dropdown-menu {
position: absolute;
float: left;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-width: 0 1px 1px;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #fff !important;
background-color: #428bca !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #999 !important;
background-color: transparent !important;
}
.navbar-form {
float: left;
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.navbar-form .form-control-static {
display: inline-block;
}
.navbar-form .input-group {
display: inline-table;
vertical-align: middle;
}
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
width: auto;
}
.navbar-form .input-group > .form-control {
width: 100%;
}
.navbar-form .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .radio,
.navbar-form .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .radio label,
.navbar-form .checkbox label {
padding-left: 0;
}
.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
.navbar-form .has-feedback .form-control-feedback {
top: 0;
}
You can find this in examples
Related
I tried to look some online but that didnt work for me. how can I make the header fixed for this.
HTML for my header is below
<div id="navbar">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-inner">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a ui-sref="about">Home</a></li>
<li><a ui-sref="route1">Home</a></li>
<li><a ui-sref="route2">Blog</a></li>
<li>Referrals</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
CSS for my header is below
/* Navbar Styles */
#navbar {
clear: both;
border-radius: 0;
border: 0;
margin: 0;
background: #f9f9f9;
height: auto;
}
#navbar li a {
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
font-family:Cambria;
color: #575757;
padding-top: 20px;
padding-bottom: 20px;
}
#navbar li a:hover {
color: #7bcfdc
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
border: 0;
width: 240px;
padding: 0;
}
.dropdown-submenu {
position:relative;
border-radius: 0;
padding: 0;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-1px;
margin-left:-1px;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
}
#navbar .navbar-nav li a i {
margin-left: 5px;
}
#navbar .navbar-nav li li a{
background: #eee;
text-transform: none;
padding-top: 11px;
padding-bottom: 11px;
}
#navbar .navbar-nav li li {
position: relative;
}
#navbar .navbar-nav li li i {
position: absolute;
right: 20px;
top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
background: #ff4e4f;
color: #FFF;
}
/*----- RESPONSIVE STYLES ------*/
#media screen and (max-width: 1199px) {
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
}
#media screen and (max-width: 768px) {
.header-top p {
text-align: center;
}
.header-top a {
margin: 10px auto 0 auto;
clear: both;
display: block;
}
}
#media screen and (min-width: 1200px) {
#navbar .dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
I am using angularjs, bootstrap. I have place this header in directive and calling the directive on Index.html. Please suggest how I can make header visible even on scrolling
You need to add the class navbar-fixed-top to the nav, and delete navbar-static-top
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
Let me know if that help!
If you want to limit the width to, lets say 400px, you can do something like this
.navbar-fixed-top{
max-width: 400px;
}
.nav {
/ / display: flex;
width: 100%;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
color: #333;
background-color: transparent;
}
.nav > li {
display: inline-block !important;
}
.number_three_li {
float: right;
}
#media (min-width: 768px) {
.navbar-nav > li.number_three_li {
float: right;
}
}
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
<div class="container-fluid" style="padding-right: 0px;">
<ul class="nav navbar-nav" style="margin-top: 0px;margin-bottom: 0px;padding-left: 0px;">
<li class="number_three_li dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
style="padding: 15px"><i
class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a>
<ul class="dropdown-menu" style="z-index: 3; left: auto; right: 0;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>
</div>
</nav>
<p style="padding-top:100px">It happend when browser's width < 768</p>
When I click button of dropdown, it's button width changes.
Before:
After click:
But what I want is that: The button is never changes, clicked button effect also removed, but just dropdown menu opens only.
Like this:
How to fix it?
use:
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
background-color: transparent!important;
}
.nav > li a.dropdown-toggle {
text-align: right;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
background-color: transparent!important;
}
.nav > li a.dropdown-toggle {
text-align: right;
}
.nav {
/ / display: flex;
width: 100%;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
color: #333;
background-color: transparent;
}
.nav > li {
display: inline-block !important;
}
.number_three_li {
float: right;
}
#media (min-width: 768px) {
.navbar-nav > li.number_three_li {
float: right;
}
}
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
<div class="container-fluid" style="padding-right: 0px;">
<ul class="nav navbar-nav" style="margin-top: 0px;margin-bottom: 0px;padding-left: 0px;">
<li class="number_three_li dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
style="padding: 15px"><i
class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a>
<ul class="dropdown-menu" style="z-index: 3; left: auto; right: 0;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>
</div>
</nav>
<p style="padding-top:100px">It happend when browser's width < 768</p>
Problem with Indentation
Can you just add a text-align:right;
.nav > li a.dropdown-toggle {
text-align: right;
}
Problem with Background-color
Add this css to keep the background transparent when it opens
.navbar-default .nav.navbar-nav>.open>a,
.navbar-default .nav.navbar-nav>.open>a:focus,
.navbar-default .nav.navbar-nav>.open>a:hover {
color: #555;
background-color: transparent;
}
Code Snippet
.nav {
// display: flex;
width: 100%;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
color: #333;
background-color: transparent;
}
.nav > li {
display: inline-block !important;
}
.nav > li a.dropdown-toggle {
text-align: right;
}
.navbar-default .nav.navbar-nav>.open>a, .navbar-default .nav.navbar-nav>.open>a:focus, .navbar-default .nav.navbar-nav>.open>a:hover {
color: #555;
background-color: transparent;
}
.number_three_li {
float: right;
}
#media (min-width: 768px) {
.navbar-nav > li.number_three_li {
float: right;
}
}
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
<div class="container-fluid" style="padding-right: 0px;">
<ul class="nav navbar-nav" style="margin-top: 0px;margin-bottom: 0px;padding-left: 0px;">
<li class="number_three_li dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
style="padding: 15px"><i
class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a>
<ul class="dropdown-menu" style="z-index: 3; left: auto; right: 0;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>
</div>
</nav>
<p style="padding-top:100px">It happend when browser's width < 768</p>
In my less-file, I have a section where I define some responsive code for my navigation.
I want to use this style only for the header, otherwise it will affect my footer too. But my site doesn’t show the styled navigation if I wrap it in header. This doesn’t work:
header {
.content {
padding-top: 80px;
}
li.expanded.dropdown {
float: none !important;
}
.navbar-nav {
float: right !important;
background: #b4b48e;
width: 160px;
margin: 0px -15px;
}
.navbar-default .navbar-nav > li > a {
color: white;
}
}
But this works:
.content {
padding-top: 80px;
}
li.expanded.dropdown {
float: none !important;
}
.navbar-nav {
float: right !important;
background: #b4b48e;
width: 160px;
margin: 0px -15px;
}
.navbar-default .navbar-nav > li > a {
color: white;
}
What am I missing?
Compiled non-working version of the CSS, including HTML:
header .content {
padding-top: 80px;
}
header li.expanded.dropdown {
float: none !important;
}
header .navbar-nav {
float: right !important;
background: #b4b48e;
width: 160px;
margin: 0px -15px;
}
header .navbar-default .navbar-nav > li > a {
color: white;
}
<header class="navbar navbar-default container" id="navbar" role="banner">
<div class="navbar-header">
<a class="logo navbar-btn pull-left" href="/startseite" title="">
<img class="img-responsive" src="" alt="">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<div class="region region-navigation-collapsible">
<nav role="navigation" aria-labelledby="block-bootstrap-custom-main-menu-menu" id="block-bootstrap-custom-main-menu" class="contextual-region">
<ul class="menu nav navbar-nav">
<li>some navigation</li>
<li>there are more items here</li>
</ul>
</nav>
</div>
</div>
</header>
Your CSS shows the navbar-default class as a sub element to the header, when in fact it is a class of the header itself. So by changing your CSS to the following it should work.
header.navbar-default {
.content {
padding-top: 80px;
}
li.expanded.dropdown {
float: none !important;
}
.navbar-nav {
float: right !important;
background: #b4b48e;
width: 160px;
margin: 0px -15px;
}
.navbar-nav > li > a {
color:white;
}
}
So you are looking for (something more like) this below, but as commented, your markup simply does not "match" your css.
header.navbar-default {
li.expanded.dropdown {
float: none !important;
}
.navbar-nav {
padding-top: 80px;
float: right !important;
background: #b4b48e;
width: 160px;
margin: 0px -15px;
}
.navbar-nav > li > a {
color:white;
}
}
I need to draw a small vertical line that should be appear after every navbar li.
Buut the issue is whenever I try to draw something, navbar gets messed up and the navbar goes into second lines. I cant really draw a vertical line either.here's the code
html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Double Double</title>
<link rel="shortcut icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700%7CRoboto+Slab:400,100' rel='stylesheet' type='text/css' />
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/double.css" rel="stylesheet">
</head>
<body>
<nav class="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div style="margin: auto;display: table;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<hr class="vertical"/>
<li>Deals</li>
<li>Pickup Deals</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
</nav>
</body>
</html>
css
/*navbar properties */
.navbar .brand {
max-height: 40px;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
.navbar a.navbar-brand {
padding: 9px 15px 8px;
}
.navbar{
font-family: young;
clear: both;
}
.navbar a{
color: #515254;
}
.navbar-nav{
font-size: 20px;
padding-top: 20px;
}
#bs-example-navbar-collapse-1{
float: left;
}
.nav > li > a:hover, .nav > li > a:focus{
color: #007f3d;
background: none;
}
.navbar-toggle .icon-bar {
background-color: black;
}
.navbar-toggle {
border: 1px solid #000;
}
.verticalLine {
border-left: thick solid #ff0000;
}
hr.vertical
{
color: black;
width: 0px;
height: 100%; /* or height in PX */
}
/*navbar properties */
JSFIDDLE
Use border-right for each menu li instead of using hr.
.navbar-nav>li{
border-right: 1px solid #000;
}
and remove the last element border.
.navbar-nav>li:last-child{
border: none;
}
You may not add <hr> element. just write this:
.nav > li:not(:last-child) {
border-right: 1px solid red;
box-sizing: border-box;
}
box-sizing: border-box; is for width of li wouldn't exceed its original width
May be this is what you want..
.navbar-default {
background: #005986;
}
.navbar {
border: 0;
border-radius: 0;
}
ul.nav {
list-style: none;
border-right: 1px solid #84B6D0;
}
ul.nav li {
padding: 20px 0;
display: inline-block;
}
ul.nav li a {
padding: 20px 10px;
color: #fff;
position: relative;
}
ul.nav li a:after {
position: absolute;
content: "";
width: 2px;
height: 60%;
right: 0;
background: red;
top: 50%;
transform: translate(0, -50%);
}
ul.nav li:first-child a:before {
position: absolute;
content: "";
width: 2px;
height: 60%;
left: 0;
background: white;
top: 50%;
transform: translate(0, -50%);
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: blue;
}
.navbar-default .navbar-nav>li>a:hover {
background: #022E44;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
</div>
</nav>
Box-shadow does not create new elements. Try adding:
#media (min-width: 768px)
.navbar-nav > li {
...
box-shadow: inset -1px 0 0 0 black; // high element or..
box-shadow: 16px 0 0 -15px black; // .. closer to text height
}
.navbar-nav > li:last-of-type {
...
box-shadow: none;
}
You should take a look at this css selector ~.
http://www.w3schools.com/cssref/css_selectors.asp
ul li {
display: inline-block;
padding: 0 10px;
}
ul li ~ li {
border-left: 1px solid #333;
}
<ul>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
</ul>
You can add the following lines in your css file. the problem will be solved.
ul.navbar-nav li{
float: left;
list-style: none;
padding: 0px 6px;
border-right: 1px solid #000;
}
ul.navbar-nav li a{
text-decoration: none;
}
ul.navbar-nav li:last-child{
border-right: none;
}
or instead of using border-right: 1px solid #000; in li you can use an image here as a background.
here is my codepen link: http://codepen.io/rounak/pen/dOgLBx
ul li {
display: inline-block;
padding: 0 10px;
}
ul li ~ li {
border-bottom: 1px solid #333;
}
<ul>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
</ul>
my BOOTPLY... MY BOOTPLY HERE
I need my menu items (car, house, street, boat) to float right at same height level as my logo (for desktop dimensions) and everything else to stay the same as current (including mobile toggle menu behaviour).
Is that possible to achieve?
/* CSS used here will be applied after bootstrap.css */
/***** Menu *****/
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:focus,.navbar-default .navbar-nav > .active > a:hover {
color: #fff;
}
.menu-container {
background-color: #fff;
border-bottom: 1px solid #000;
min-height: 20px;
position: relative;
}
.navbar-nav a:hover {
color: #000;
}
.navbar-nav a:link {
font-size: 12px;
font-family: 'century schoolbook';
color: #000;
text-decoration: overline;
text-decoration-color: #A10000;
}
.brand-name a {
text-decoration: none;
}
.brand-name img {
max-width: 137px;
padding: 8px;
/*position:absolute;*/
left: 0;
}
ul {
list-style-type: none;
}
.navbar-form input,.form-inline input {
width: auto;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
#sidebar.affix-top {
position: static;
}
#sidebar.affix {
position: fixed;
top: 80px;
}
.navbar-default .navbar-nav > li > a {
color: #000;
font-family: 'LuzSans-Book';
font-size: 14px;
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #A10000;
color: #000;
margin-top:4px;
margin-bottom:4px;
}
.navbar-default .navbar-nav > .active > a {
background-color: #000;
margin-top:4px;
margin-bottom:4px;
}
.navbar-custom-social {
height: 15px;
float: right;
clear: none;
margin-right: 25px;
}
.navbar-fixed-top {
padding-top: 0;
}
.navbar-default .navbar-brand {
color: #777;
padding: 0;
height: inherit;
float: none;
display: inline-block;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav {
margin: 0;
}
.navbar-default {
background-color: transparent;
border: 0;
}
.navbar-collapse.collapse.in {
width: 100%;
}
p.ajaxSearch_intro {
margin: 0;
}
.navbar-default .navbar-collapse,.navbar-default .navbar-form {
padding: 0;
}
/*toggle btn */
.navbar-default .navbar-toggle {
border: 1px solid #000;
border-radius: 0;
padding: 5px 10px;
color: #000;
background-color: #A10000;
}
#nav.affix .logo_wrap {
display: none;
}
#nav.affix-top .logo_wrap {
display: block;
background-image: url(/assets/images/header-background.png);
background-color: #fff;
}
#nav.affix .logo_wrap-text {
display: none;
}
#nav.affix-top .logo_wrap-text {
display: block;
background-image: url(/assets/images/header-background.png);
background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<header id="nav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default navbar-static">
<div class="clearfix container navbar-fixed-top">
<div class="clearfix menu-container">
<div class="pull-right clearfix toggle_btn_wrap">
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
</div>
<div class="pull-left brand-name">
<img alt="***brandlogo***" src="assets/images/logo.png">
</div>
<div class="clearfix prevent-float"></div>
<div class="navbar-collapse collapse">
<ul class="navbar-nav nav">
<li>
car
</li>
<li>
house
</li>
<li>
street
</li>
<li>
boat
</li>
</ul>
</div>
</div>
</div>
</div></div></div>
</div></header>
You need to use display:inline-block; on both divs that contain your logo and menu items and then float the menu item div to the right.
The essential necessary changes are:
1.) Make sure that the CSS rule for .navbar-nav, contains float:right
2.) From the DIV <div class="clearfix prevent-float"></div>, remove both classes.
Now the two elements can be next to each other. They are not yet, but that is due to various padding and/or margin settings, which you also have to adjust.