.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>
Related
I am using bootstrap5 navbar.In the navbar there is dropdown menu link.It works but the problem is that on 320*480 screen size the dropdown collapses but can't scroll or access the menu items inside the dropdown.Can anyone help me to resolve this issue.Thanks for the help in advance.My code:https://codepen.io/ANANTHUC/full/RwjvVKe
$(function () {
$(".dropdown-menu a.dropdown-toggle").on("click", function (e) {
if (!$(this).next().hasClass("show")) {
$(this).parents(".dropdown-menu").first().find(".show").removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass("show");
$(this)
.parents("li.nav-item.dropdown.show")
.on("hidden.bs.dropdown", function (e) {
$(".dropdown-submenu .show").removeClass("show");
});
return false;
});
$(".firstLevel").on("click", function (e) {
$(this).toggleClass("dropdown-Opened");
var sublevel_Dropdown = $(".firstLevel").next("ul").find(".subLevel");
if (sublevel_Dropdown.hasClass("dropdown-Opened")) {
$(sublevel_Dropdown).removeClass("dropdown-Opened");
$(sublevel_Dropdown).next('.dropdown-menu').removeClass("show")
}
if ($(".firstLevel").not(this).hasClass("dropdown-Opened")) {
$(".firstLevel").not(this).removeClass("dropdown-Opened");
//alert("class added");
}
});
$(".subLevel").on("click", function (e) {
$(this).toggleClass("dropdown-Opened");
});
var main__nestedDropdown = $(".subLevel").parent("li").parent("ul").prev("a.subLevel");
$(main__nestedDropdown).on("click", function (e) {
var child__nestedDropdown = main__nestedDropdown.next("ul").find("a.subLevel");
// alert("class added");
if (child__nestedDropdown.hasClass("dropdown-Opened")) {
$(child__nestedDropdown).removeClass("dropdown-Opened");
}
});
});
.menu-area {
background: #563d7c;
}
.dropdown-menu {
padding: 0;
margin: 0;
border: 0 solid transition !important;
border: 0 solid rgba(0, 0, 0, 0.15);
border-radius: 0;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.mainmenu a,
.navbar-default .navbar-nav > li > a,
.mainmenu ul li a,
.navbar-expand-lg .navbar-nav .nav-link {
color: #fff !important;
font-size: 16px;
text-transform: capitalize;
padding: 16px 15px;
font-family: "Roboto", sans-serif;
display: block !important;
}
.mainmenu .active a,
.mainmenu .active a:focus,
.mainmenu .active a:hover,
.mainmenu li a:hover,
.mainmenu li a:focus,
.navbar-default .navbar-nav > .show > a,
.navbar-default .navbar-nav > .show > a:focus,
.navbar-default .navbar-nav > .show > a:hover {
color: #fff;
}
/*==========Sub Menu=v==========*/
#media screen and (min-width: 992px) {
.mainmenu .collapse ul > li:hover > a {
background: #d61a5e;
}
.mainmenu .collapse ul ul > li:hover > a,
.navbar-default .navbar-nav .show .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .show .dropdown-menu > li > a:hover {
background: #d61a5e;
}
.mainmenu .collapse ul ul ul > li:hover > a {
background: #4caf50;
}
}
.mainmenu .collapse ul ul,
.mainmenu .collapse ul ul.dropdown-menu {
background: #1565c0;
}
.mainmenu .collapse ul ul ul,
.mainmenu .collapse ul ul ul.dropdown-menu {
background: #1e88e5;
}
.mainmenu .collapse ul ul ul ul,
.mainmenu .collapse ul ul ul ul.dropdown-menu {
background: #64b5f6;
}
/******************************Drop-down menu work on hover**********************************/
.mainmenu {
background: none;
border: 0 solid;
margin: 0;
padding: 0;
min-height: 20px;
width: 100%;
}
#media only screen and (min-width: 992px) {
.mainmenu .collapse ul li:hover > ul {
display: block;
}
.mainmenu .collapse ul ul {
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
display: none;
}
/*******/
.mainmenu .collapse ul ul li {
position: relative;
}
.mainmenu .collapse ul ul li:hover > ul {
display: block;
}
.mainmenu .collapse ul ul ul {
position: absolute;
top: 0;
left: 100%;
min-width: 250px;
display: none;
}
/*******/
.mainmenu .collapse ul ul ul li {
position: relative;
}
.mainmenu .collapse ul ul ul li:hover ul {
display: block;
}
.mainmenu .collapse ul ul ul ul {
position: absolute;
top: 0;
left: -100%;
min-width: 250px;
display: none;
z-index: 1;
}
}
#media only screen and (max-width: 991px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a {
padding: 16px 15px 16px 35px;
}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a {
padding: 16px 15px 16px 45px;
}
.navbar-nav .dropdown .dropdown-toggle::after {
content: "+" !important;
font-size: 20px;
vertical-align: 0;
top: 8px;
border: 1px solid #fff;
right: 40px;
width: 32px;
height: 32px;
text-align: center;
position: absolute;
}
.navbar-nav .dropdown .dropdown-Opened::after {
content: "-" !important;
}
div#navbarSupportedContent {
position: absolute;
width: 100%;
z-index: 1;
top: 56px;
left: 0;
background: #0062cc;
}
/*Slide from left
.navbar-collapse {
position: fixed;
top: 56px;
left: 0;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 75%;
background-color: #1e88e5;
height: 100%;
}
.navbar-collapse.collapsing {
left: -75%;
transition: height 0s ease;
}
.navbar-collapse.show {
left: 0;
transition: left 300ms ease-in-out;
}
.navbar-toggler.collapsed ~ .navbar-collapse {
transition: left 500ms ease-in-out;
}
*/
}
header {
position: fixed;
width: 100%;
z-index: 2;
}
#banner {
background: url("../img/banner.png") no-repeat;
background-size: cover;
height: 600px;
}
#banner h1 {
color: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<header id="menu_area" class="menu-area">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light mainmenu">
<div class="container-fluid">
<div class="logo">
<a class="navbar-brand" href="index.html">
LOGO
</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-lg-auto customNav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle firstLevel" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Main Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="dropdown">
<a class="dropdown-toggle subLevel" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sub Dropdown1</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="dropdown">
<a class="dropdown-toggle subLevel" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sub Dropdown2</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle firstLevel " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Main Dropdown2
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
<main>
<section id="banner">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae sit dignissimos totam dolore corporis! </h1>
</div>
</div>
</section>
</main>
Update following style in css.
div#navbarSupportedContent {
position: absolute;
width: 100%;
z-index: 1;
top: 56px;
left: 0;
background: #0062cc;
overflow: hidden;
overflow-y: auto;
max-height: calc(100vh - 56px);
}
In bootstrap 5 there is a CSS class navbar-nav-scroll to handle the scroll behaviour. Try this in your code:
<ul class="navbar-nav ms-lg-auto customNav navbar-nav-scroll">
also, you can adjust the scroll length by using style="--bs-scroll-height: 100px;", so it will be like this
<ul class="navbar-nav ms-lg-auto customNav navbar-nav-scroll" style="--bs-scroll-height: 100px;">
reference at bootstrap doc
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;
}
}
FRONT END FOR NAVBAR
<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">
<div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />
</a>
</div>
<div class="collapse navbar-collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<h4>CATEGORY<b class="caret"></b></h4>
</a>
<ui>...........</ui>
</li>
<li>
<a href="#">
<h4>SHIRT</h4>
</a>
</li>
<li>
<a href="#">
<h4>PANTS</h4>
</a>
</li>
<li>
<a href="#">
<h4>SHOE</h4>
</a>
</li>
<li>
<a href="#">
<h4>FASHION</h4>
</a>
</li>
<li>
<a href="#">
<h4>PAPER QULING</h4>
</a>
</li>
<li>
<a href="#">
<h4>TERRACOTA</h4>
</a>
</li>
<li>
<a href="#">
<h4>MEENAKARI</h4>
</a>
</li>
<li>
<a href="#">
<h4>TRADITIONAL</h4>
</a>
</li>
<li>
<a></a>
</li>
</ul>
</ul>
</div>
<br />
</nav>
When i decrease size of google chrome the category and other stuff overlaps logo at width:1502px
I have tried this css
#media (max-width:1502px){
.navbar-brand {
height: 80px;
}
.navbar {
background-color: #ccc;
}
.navbar-toggle {
margin-top: 25px;
}
}
IMAGE : IMAGE OF NAVBAR
Because you have so many links inside your nav and due to the increased font size it's overflowing since there simply is not enough space the smaller the viewport gets.
You can change the breakpoint that the navbar collapses, additionally you can change the display property of the links so they wrap. This will leave them exposed longer but you'll still need to collapse the nav earlier then normal.
Example I:
.navbar.navbar-tall {
background-color: white;
}
.navbar.navbar-tall .navbar-nav > li > a {
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
}
.navbar.navbar-tall .navbar-brand {
padding-top: 5px;
}
.navbar.navbar-tall .navbar-brand img {
height: 90px;
}
#media (min-width: 1505px) {
.navbar.navbar-tall .navbar-nav > li > a {
line-height: 70px;
}
}
/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/
#media (max-width: 1504px) and (min-width: 768px) {
.navbar.navbar-fixed-bottom .navbar-collapse,
.navbar.navbar-fixed-top .navbar-collapse {
max-height: auto;
overflow-x: visible;
}
}
#media (max-width: 1504px) {
.navbar .navbar-header {
float: none;
min-height: 100px;
}
.navbar .navbar-left,
.navbar .navbar-right {
float: none !important;
}
.navbar .navbar-right {
margin-right: 0px;
}
.navbar .navbar-right~.navbar-right {
margin-right: 0;
}
.navbar .navbar-toggle {
display: block;
margin-top: 32.5px;
}
.navbar .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar .navbar-collapse.collapse {
display: none!important;
overflow: visible!important;
}
.navbar .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar .navbar-nav>li {
float: none;
}
.navbar .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar .collapse.in {
display: block !important;
overflow-y: auto;
}
.navbar .navbar-nav .dropdown-menu > li > a,
.navbar .navbar-nav .dropdown-menu > li > a:hover,
.navbar .navbar-nav .dropdown-menu > li > a:focus {
color: #777;
}
.navbar .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;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-tall" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">
</a>
</div>
<div class="collapse navbar-collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
CATEGORY <span class="caret"></span>
<ul class="dropdown-menu">
<li>LINK
</li>
</ul>
</li>
<li>
SHIRT
</li>
<li>
PANTS
</li>
<li>
SHOE
</li>
<li>
FASHION
</li>
<li>
PAPER QULING
</li>
<li>
TERRACOTA
</li>
<li>
MEENAKARI
</li>
<li>
TRADITIONAL
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Example II: Wrapped Links
.navbar.navbar-tall {
background-color: white;
}
.navbar.navbar-tall .navbar-nav > li > a {
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
}
.navbar.navbar-tall .navbar-brand {
padding-top: 5px;
}
.navbar.navbar-tall .navbar-brand img {
height: 90px;
}
#media (min-width: 1500px) {
.navbar.navbar-tall .navbar-nav > li > a {
line-height: 70px;
}
}
#media (max-width: 1499px) and (min-width: 1000px) {
.navbar.navbar-tall .navbar-nav {
display: table;
float: none;
}
.navbar.navbar-tall .navbar-nav > li {
display: table-cell;
}
}
/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/
#media (max-width: 1499px) and (min-width: 1000px) {
.navbar.navbar-fixed-bottom .navbar-collapse,
.navbar.navbar-fixed-top .navbar-collapse {
max-height: auto;
overflow-x: visible;
}
}
#media (max-width: 999px) {
.navbar .navbar-header {
float: none;
min-height: 100px;
}
.navbar .navbar-left,
.navbar .navbar-right {
float: none !important;
}
.navbar .navbar-right {
margin-right: 0px;
}
.navbar .navbar-right~.navbar-right {
margin-right: 0;
}
.navbar .navbar-toggle {
display: block;
margin-top: 32.5px;
}
.navbar .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar .navbar-collapse.collapse {
display: none!important;
overflow: visible!important;
}
.navbar .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar .navbar-nav>li {
float: none;
}
.navbar .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar .collapse.in {
display: block !important;
overflow-y: auto;
}
.navbar .navbar-nav .dropdown-menu > li > a,
.navbar .navbar-nav .dropdown-menu > li > a:hover,
.navbar .navbar-nav .dropdown-menu > li > a:focus {
color: #777;
}
.navbar .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;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-tall" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name">
</a>
</div>
<div class="collapse navbar-collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
CATEGORY <span class="caret"></span>
<ul class="dropdown-menu">
<li>LINK
</li>
</ul>
</li>
<li>
SHIRT
</li>
<li>
PANTS
</li>
<li>
SHOE
</li>
<li>
FASHION
</li>
<li>
PAPER QULING
</li>
<li>
TERRACOTA
</li>
<li>
MEENAKARI
</li>
<li>
TRADITIONAL
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Maybe this is what you are looking for:
.navbar-brand {
padding: 0px !important;
}
.navbar-brand > img {
height: 100%;
width: auto;
}
#media (min-width:768px) {
.navbar-brand {
padding: 15px 0px 0px 0px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<!--start - only for test pupose-->
<img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo">
<!--start - only for test pupose-->
<asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" />
</a>
</div>
<div class="navbar-collapse collapse" id=".navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<h4>CATEGORY<b class="caret"></b></h4>
</a>
</li>
<li>
<a href="#">
<h4>SHIRT</h4>
</a>
</li>
<li>
<a href="#">
<h4>PANTS</h4>
</a>
</li>
<li>
<a href="#">
<h4>SHOE</h4>
</a>
</li>
<li>
<a href="#">
<h4>FASHION</h4>
</a>
</li>
<li>
<a href="#">
<h4>PAPER QULING</h4>
</a>
</li>
<li>
<a href="#">
<h4>TERRACOTA</h4>
</a>
</li>
<li>
<a href="#">
<h4>MEENAKARI</h4>
</a>
</li>
<li>
<a href="#">
<h4>TRADITIONAL</h4>
</a>
</li>
<li><a></a></li>
</ul>
</div>
</div>
</nav>
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>
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