I am using bootstrap. I need to make this responsive but i couldn't handle it. Specially search bar frustrate me.
I want menu elements collapsed under 992px. Waiting for suggestions. Thanks.
CodePen Link
Example Code:
nav.navbar-default {
background-color: #232323;
margin-right: 1px;
border: 0;
}
div.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
div.navbar-wrapper .container {
padding: 0;
}
div.navbar-wrapper .col {
padding: 0;
}
div.navbar-wrapper .col:first-child {
padding-right: 30px;
}
div.navbar-wrapper .menu-middle {
width: 64.66667%;
}
div.navbar-wrapper .menu-right {
width: 10.33333%;
}
div.navbar-wrapper .logo {
background: url(/assets/img/logo.png) center no-repeat;
background-color: #3d3d3d;
min-width: 100%;
min-height: 100%;
height: 134px;
}
div.navbar-wrapper .logo.navbar-brand {
margin-left: 0;
}
div.navbar-wrapper .logo:hover {
background-color: #3d3d3d;
}
div.navbar-wrapper .logo span.brand-name {
position: absolute;
}
div.navbar-wrapper .nav-wrap .top-nav {
height: 36px;
width: 100%;
display: block;
}
div.navbar-wrapper .nav-wrap .top-nav > li > a {
font-size: 12px;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
div.navbar-wrapper .nav-wrap .top-nav > li > a:hover {
color: #999;
}
div.navbar-wrapper .nav-wrap .top-nav > li > a .fa {
padding-right: 5px;
}
div.navbar-wrapper .nav-wrap .top-nav .dropdown {
background-color: #555555;
margin-right: 2.2px;
}
div.navbar-wrapper .nav-wrap .top-nav .navbar-form {
padding: 0;
margin: 0;
}
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .form-control,
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default {
background-color: #555555;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
padding: 20px 32px;
color: #fff;
font-size: 14px;
}
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .form-control:focus,
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default {
padding: 9px;
font-size: 16px;
outline: 0;
}
div.navbar-wrapper .nav-wrap .main-nav {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 24px 0 24px 15px;
}
div.navbar-wrapper .nav-wrap .main-nav > li > a {
font-size: 14px;
font-weight: 700;
color: #fff;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
padding-left: 22px;
padding-right: 22px;
}
div.navbar-wrapper .nav-wrap .main-nav > li > a:hover {
background-color: #00a9df;
}
div.navbar-wrapper .nav-wrap .main-nav > li.active a {
background-color: #00a9df;
}
div.navbar-wrapper .nav-wrap .main-nav > li.active a:hover,
div.navbar-wrapper .nav-wrap .main-nav > li.active a:focus {
color: #fff;
}
div.navbar-wrapper .my-cart-wrap {
background-color: #ff9c00;
min-height: 100%;
height: 134px;
display: table;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap {
display: table-cell;
height: 100%;
text-align: center;
color: #fff;
vertical-align: middle;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap a {
color: #fff;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap a:hover {
text-decoration: underline;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap .fa-shopping-cart {
font-size: 18px;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap span.my-cart {
font-size: 14px;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap span.cart-item {
font-size: 12px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- NAVBAR -->
<div class="navbar-wrapper">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default navbar-static-top">
<div class="container navbar-wrap">
<div class="navbar-header col col-md-3">
<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 logo" href="#"><span class="brand-name">Project name</span></a>
</div>
<div class="col col-md-8 menu-middle">
<div id="navbar" class="navbar-collapse collapse nav-wrap">
<ul class="nav navbar-nav top-nav">
<li><i class="fa fa-user" aria-hidden="true"></i>My Account
</li>
<li><i class="fa fa-heart" aria-hidden="true"></i>My Wishlist
</li>
<li><i class="fa fa-external-link" aria-hidden="true"></i>Checkout
</li>
<li class="dropdown">
USD <span class="caret"></span>
<ul class="dropdown-menu">
<li>TL
</li>
<li>EURO
</li>
</ul>
</li>
<li class="dropdown">
Turkish<span class="caret"></span>
<ul class="dropdown-menu">
<li>English
</li>
</ul>
</li>
<div class="input-group nav-search-bar">
<form class="navbar-form">
<input type="text" class="form-control" placeholder="Enter your keyword">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
</span>
</form>
</div>
</ul>
<ul class="nav navbar-nav main-nav text-uppercase">
<li class="active">Home
</li>
<li>Living Room
</li>
<li>Bedroom
</li>
<li>Dinning
</li>
<li>Blog
</li>
<li>Contact Us
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<div class="my-cart-wrap col col-sm-1 menu-right">
<div class="shopping-cart-wrap">
<a href="#">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<br>
<span class="my-cart">My Cart</span>
<br>
<span class="cart-item">0 Item</span>
</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Example:
Use this code for searchbar.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">#example.com</span>
</div>
Related
I'm looking to get the dots aligned, fixed, and should not move. This is what I need it to look like:
This is what I have so far below. As you can see if there are double digits, the dot moves.
This is what I'm rendering on the DOM. As you can see I have separated all three items into their own span.
<div className="Legend-Component col-3" align="center">
{legendData.map((item, index) => (
<ul key={index}>
<li>
<span className="Legend-Name" onClick={() => this.handleClick(item.assetManagerId)}>
{item.name}
</span>
<span className={`${item.className[index]}`}></span>
<span className="Legend-Total">{item.total}</span>
</li>
</ul>
))}
</div>
My CSS:
.Legend-Component ul {
list-style-type: none;
font-size: 12px;
text-align: right;
margin: auto;
}
.Legend-Name{
color: #006192;
cursor: pointer;
}
.Legend-Total {
font-weight: bold;
}
.navy {
display: inline-block;
width: 13px;
height: 13px;
background-color: #001f3f;
border-radius: 50%;
border: 1px solid grey;
}
.blue {
display: inline-block;
height: 13px;
width: 13px;
background-color: #0074D9;
border-radius: 50%;
border: 1px solid grey;
margin: 0 2px;
}
.aqua {
display: inline-block;
height: 13px;
width: 13px;
background-color: #7FDBFF;
border-radius: 50%;
border: 1px solid grey;
margin: 0 2px;
}
.teal {
display: inline-block;
height: 13px;
width: 13px;
background-color: #39CCCC;
border-radius: 50%;
border: 1px solid grey;
margin: 0 2px;
}
Make each list item a flex item. Allow the left and right elements to fill the available space with flex: 1.
This will keep the circles centred.
ul {
list-style: none;
padding: 0;
}
.circle {
display: inline-block;
height: 13px;
width: 13px;
border-radius: 50%;
border: 1px solid grey;
margin: 0 2px;
}
.blue {
background-color: #0074D9;
}
/* The important bits... */
.legend-item {
display: flex;
}
.legend-name {
flex: 1;
text-align: right;
}
.legend-total {
flex: 1;
}
<div className="Legend-Component col-3">
<ul key={index}>
<li class="legend-item">
<span class="legend-name">
Legend Name
</span>
<span class="circle blue"></span>
<span class="legend-total">00</span>
</li>
<li class="legend-item">
<span class="legend-name">
Legend Name
</span>
<span class="circle blue"></span>
<span class="legend-total">000</span>
</li>
<li class="legend-item">
<span class="legend-name">
Legend Name Long
</span>
<span class="circle blue"></span>
<span class="legend-total">0</span>
</li>
</ul>
</div>
If you need to align the circles off-centre, you may have to play with the flex-basis:
ul {
list-style: none;
padding: 0;
}
.circle {
display: inline-block;
height: 13px;
width: 13px;
border-radius: 50%;
border: 1px solid grey;
margin: 0 2px;
}
.blue {
background-color: #0074D9;
}
/* The important bits... */
.legend-item {
display: flex;
}
.legend-name {
flex: 1;
flex-basis: 100%;
text-align: right;
}
.legend-total {
flex: 1;
flex-basis: 50px;
}
<div className="Legend-Component col-3">
<ul key={index}>
<li class="legend-item">
<span class="legend-name">
Legend Name
</span>
<span class="circle blue"></span>
<span class="legend-total">00</span>
</li>
<li class="legend-item">
<span class="legend-name">
Legend Name
</span>
<span class="circle blue"></span>
<span class="legend-total">000</span>
</li>
<li class="legend-item">
<span class="legend-name">
Legend Name Long
</span>
<span class="circle blue"></span>
<span class="legend-total">0</span>
</li>
</ul>
</div>
I am having some issues with creating this transparent dropdown effect in Bootstrap:
At the time of writing, it looks like this:
I've added a jsfiddle here in which I am experimenting trying to get the effect but it just doesnt seem to be working: https://jsfiddle.net/vuv9on49/. It also seems like the positioning of the dropdown is a bit off, it overlaps over the main navbar a bit, as seen in the second photo.
HTML
<div class="header" id="navbar-header">
<div navbar-shrink offset="50" scroll-class="navbar-shrink" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="navbar-logo">
<a class="navbar-brand" href="/">
<img src="http://marquesslondon.com/wp-content/uploads/2016/10/MarquessLdnBBwhtsml-2-e1477168862283.png">
</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-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 style="display: block">
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav" id="navbar">
<li>
HOME
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">TAILORING</a>
<ul class="dropdown-menu">
<li>
Process
</li>
<li>
Our Look
</li>
</ul>
</li>
<li>
<a ng-href="/lifestyle">LIFESTYLE</a>
</li>
<li>
<a ng-href="/story">STORY</a>
</li>
<li>
<a ng-href="/contact">GET IN TOUCH</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body,
html {
height: 100%;
margin: 0;
}
/*=======================================================
Header, footer and navbar
========================================================*/
.navbar-logo {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 100%;
}
.navbar-toggle {
position: absolute;
top: 5px;
right: 5px;
}
.navbar-header {
width: 100%;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
margin-top: 2em;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 5px;
text-transform: uppercase;
font-size: 14px;
}
.navbar {
position: relative;
}
.navbar-shrink .navbar-nav {
display: none;
}
.navbar-shrink.navbar {
height: 5.5em;
}
.navbar-shrink.navbar>.container>.navbar-header>.navbar-brand img {
width: 250px;
height: 44px;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 300;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>.active {
color: #808ba0;
}
.navbar-default .navbar-nav>li>a:hover {
color: #808ba0;
font-weight: 300;
}
#navbar-header {
transition: 2s ease-in-out;
}
.navbar-default {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar-default.navbar-shrink {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar {
position: relative;
border-radius: 0px;
border: 0px;
height: 9.5em;
-webkit-transition: height 300ms ease-in-out;
-moz-transition: height 300ms ease-in-out;
-o-transition: height 300ms ease-in-out;
transition: height 300ms ease-in-out;
}
.navbar-fixed-top {
position: fixed !important;
}
.navbar-brand img {
width: 250px;
height: 44px;
}
.nav {
text-align: center;
}
.navbar .navbar-collapse {
text-align: center;
}
.dropdown-menu {
background-color: #474A53;
opacity: 0.8;
color: #fff;
}
.dropdown-menu ul {
margin-top: 0.7em;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.mq-footer {
text-align: center;
font-family: 'Josefin Slab', sans-serif;
padding-bottom: 2em;
}
.mq-footer>.container>#footer-copyright {
font-size: 12px;
color: #737373;
}
.footer-icon {
font-size: 25px;
color: #000;
opacity: 0.8;
padding-top: 1em;
padding-right: 0.25em;
}
.footer-icon:hover {
opacity: 1;
cursor: pointer;
}
#footer-copyright {
margin-top: 2em;
}
#footer-links {
margin-top: 2em;
}
#footer-links ul {
padding-left: 25px;
}
#footer-links ul li {
display: inline;
margin-right: 25px;
}
#footer-links ul li a {
color: #333741;
}
How can I correct this?
I have changed in css margin-top:2em to margin-top:32px. I have increased little bit margin because dropdown depends on parent div and parent div(li) has below some space that's why dropdown overwrite to menu.
.navbar .navbar-nav {
margin-top: 32px;
}
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body,
html {
height: 100%;
margin: 0;
}
/*=======================================================
Header, footer and navbar
========================================================*/
.navbar-logo {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 100%;
}
.navbar-toggle {
position: absolute;
top: 5px;
right: 5px;
}
.navbar-header {
width: 100%;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
margin-top: 32px;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 5px;
text-transform: uppercase;
font-size: 14px;
}
.navbar {
position: relative;
}
.navbar-shrink .navbar-nav {
display: none;
}
.navbar-shrink.navbar {
height: 5.5em;
}
.navbar-shrink.navbar>.container>.navbar-header>.navbar-brand img {
width: 250px;
height: 44px;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 300;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>.active {
color: #808ba0;
}
.navbar-default .navbar-nav>li>a:hover {
color: #808ba0;
font-weight: 300;
}
#navbar-header {
transition: 2s ease-in-out;
}
.navbar-default {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar-default.navbar-shrink {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar {
position: relative;
border-radius: 0px;
border: 0px;
height: 9.5em;
-webkit-transition: height 300ms ease-in-out;
-moz-transition: height 300ms ease-in-out;
-o-transition: height 300ms ease-in-out;
transition: height 300ms ease-in-out;
}
.navbar-fixed-top {
position: fixed !important;
}
.navbar-brand img {
width: 250px;
height: 44px;
}
.nav {
text-align: center;
}
.navbar .navbar-collapse {
text-align: center;
}
.dropdown-menu {
background-color: #474A53;
opacity: 0.8;
color: #fff;
}
.dropdown-menu ul {
margin-top: 0.7em;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.mq-footer {
text-align: center;
font-family: 'Josefin Slab', sans-serif;
padding-bottom: 2em;
}
.mq-footer>.container>#footer-copyright {
font-size: 12px;
color: #737373;
}
.footer-icon {
font-size: 25px;
color: #000;
opacity: 0.8;
padding-top: 1em;
padding-right: 0.25em;
}
.footer-icon:hover {
opacity: 1;
cursor: pointer;
}
#footer-copyright {
margin-top: 2em;
}
#footer-links {
margin-top: 2em;
}
#footer-links ul {
padding-left: 25px;
}
#footer-links ul li {
display: inline;
margin-right: 25px;
}
#footer-links ul li a {
color: #333741;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="header" id="navbar-header">
<div navbar-shrink offset="50" scroll-class="navbar-shrink" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="navbar-logo">
<a class="navbar-brand" href="/">
<img src="http://marquesslondon.com/wp-content/uploads/2016/10/MarquessLdnBBwhtsml-2-e1477168862283.png">
</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-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 style="display: block">
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav" id="navbar">
<li>
HOME
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">TAILORING</a>
<ul class="dropdown-menu">
<li>
Process
</li>
<li>
Our Look
</li>
</ul>
</li>
<li>
<a ng-href="/lifestyle">LIFESTYLE</a>
</li>
<li>
<a ng-href="/story">STORY</a>
</li>
<li>
<a ng-href="/contact">GET IN TOUCH</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
//#384a5a clear color
//#2f3f4d dark color
when I hover and click the arrow right: content: "\e080"; get light color : #384a5a,
the background should be the same as the li background: #2f3f4d.
everything it is wroking perfect just this background colour when I hover the li with arrow right: content: "\e080"; get different background.
So what I try to archive is: make the bg colour the same as the li when I hover the arrow right.
jsfiddle: http://jsfiddle.net/Wc4xt/4393/
html:
<div class="sidebar ">
<div class="sidebar-wrapper">
<ul class="sidebar-nav">
<li>test
</li>
<li>
test
</li>
<li>
<i class="pull-left fa-lg fa fa-barcode" aria-hidden="true"></i>
test
</li>
<li>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample1" aria-expanded="true" aria-controls="collapseExample1" class="">tes
</a>
</div>
<div class="collapse-styled collapse in" id="collapseExample1" aria-expanded="true">
test
<a class="current" href="test">test</a>
test
</div>
</li>
<li>
<i class="pull-left fa fa-lg fa-book" aria-hidden="true"></i>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" class="collapsed">test
</a>
</div>
<div class="collapse-styled collapse" id="collapseExample" aria-expanded="false" style="height: 0px;">
test
test
test
</div>
</li>
<li>
<i class="pull-left fa fa-map" aria-hidden="true"></i>
<a href="test">test
</a>
</li>
</ul>
</div>
</div>
css:
.sidebar-wrapper {
height: 100%;
overflow-y: auto;
background: #384a5a;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav {
font-size: 0.8125em;
}
.sidebar-nav i {
margin-top: 20px;
margin-left: 25px;
color: #3181cc;
}
.sidebar-nav li {
line-height: 60px;
border-bottom: 1px solid #455b6f;
}
.sidebar-nav li:nth-child(1) {
color: #3181cc;
background-color: #273440;
font-size: 1.5em;
height: 65px;
text-indent: 20px;
}
.sidebar-nav li.current {
background: #000;
}
.sidebar-nav li.current a {
color: #ffffff;
border-right: 5px solid #000;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #ffffff;
border-right: 5px solid #3181cc;
background: #2f3f4d;
}
.sidebar-nav li a {
display: block;
height: 65px;
}
.collapse-link a {
background-color: #2f3f4d;
border-right: 5px solid #3181cc;
}
.collapse-link a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: #ffffff;
margin-right: 20px;
background-color: #2f3f4d;
}
.collapse-link a.collapsed {
background-color: #384a5a;
border-right: 5px solid #384a5a !important;
}
.collapse-link a.collapsed:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
background-color: #384a5a !important;
}
.collapse-link a.collapsed:after:hover {
background: #2f3f4d;
}
Working fiddle fiddle
add this css.
.collapse-link a.collapsed:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
background-color: #2f3f4d !important;
}
.sidebar-nav li a:hover:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
background-color: #2f3f4d !important;
}
please use this style sheet
.collapse-link a.collapsed::after {
background-color: rgba(0, 0, 0, 0);
}
I've been following a tutorial to create mobile navigation without Javascript and the idea behind this is to use a checkbox and the :checked CSS selector. I managed to get it working when I tested it out on a blank page but then when I tried to integrate it into my actual site it stopped working. I'll show the code for both so you can see where perhaps I've gone wrong (note that DIV IDs and classes have changed between the two documents but I've made sure the HTML has also changed accordingly so that's not the problem).
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 10px 10px;
border: 1px black solid;
}
#menu {
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
That's the working code. Here's the non-working code. In the non-working code, clicking the button does not do anything and I can't work out why!
body {
margin: 0;
line-height: 1.428;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
}
#mobile-nav {
display: none;
}
#regular-nav {
display: block;
}
.show-menu {
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 10px 10px;
border: 1px black solid;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #mobile-nav {
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
#media only screen and (max-width: 768px) {
#mobile-navigation-btn {
display: block;
}
#regular-nav {
display: none;
}
}
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1000px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">Menu
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</label>
<input type="checkbox" id="show-menu" role="button">
</div>
<div id="regular-nav">
<ul>
<li>Home
</li>
<li>Customer Research
</li>
<li>Business Improvement
</li>
<li>Contact Us
</li>
<li>Blog
</li>
</ul>
</div>
</div>
</div>
<div id="mobile-nav">
<ul>
<li>Home
</li>
<li>Customer Research
</li>
<li>Business Improvement
</li>
<li>Contact Us
</li>
<li>Blog
</li>
</ul>
</div>
Its not working because of your css selector, the input and the menu need to be siblings the way you currently have the css set. Read this post to understand further the ~ operator
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
body {
margin: 0;
line-height: 1.428;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
<!--display: none;
-->
}
#mobile-nav {
display: none;
}
.show-menu {
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 10px 10px;
border: 1px black solid;
}
/*Hide checkbox*/
input[type=checkbox] {
<!--display: none;
-->
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #mobile-nav {
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
#media only screen and (max-width: 768px) {
#mobile-navigation-btn {
display: block;
}
#regular-nav {
display: none;
}
}
<!doctype html>
<head>
<script>
// Picture element HTML5 shiv
document.createElement("picture");
</script>
<script src="picturefill.min.js" async></script>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1000px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">Menu
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</label>
</div>
</div>
</div>
<input type="checkbox" id="show-menu" role="button" />
<div id="mobile-nav">
<ul>
<li>Home
</li>
<li>Customer Research
</li>
<li>Business Improvement
</li>
<li>Contact Us
</li>
<li>Blog
</li>
</ul>
</div>
</body>
</html>
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>