I've got an annoying space between the navbar and an <h1> header, at the top of the page, that I can't seem to get rid of. I've tried .navbar { margin-bottom: 0; } and section#title-bar { margin-top: 0; }. But, the gap doesn't go away. I'm using bootstrap 4.
Here's my code:
body {
background: #FFF;
padding-top: 4rem; }
body .navbar {
margin-bottom: 0px; }
body .green-text {
color: #1CAA98 !important; }
body .jumbotron {
background: url(../img/site_showcase_bg.jpg) no-repeat top center;
color: #FFF;
height: 500px;
overflow: none; }
body .jumbotron img.app-btn {
width: 40%;
margin-right: 30px;
display: inline; }
body .jumbotron h1 {
margin-top: 60px; }
body .jumbotron p {
margin-bottom: 40px; }
body .jumbotron img.showCase-img {
max-width: 100%; }
body section#middle {
padding: 10px 0 40px 0; }
body section#middle img.demo-1 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#middle img.demo-2 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#middle img.demo-3 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#feature {
background: #1CAA98;
color: #FFF;
padding: 40px;
overflow: auto; }
body section#feature ul li {
font-size: 22px;
list-style: none; }
body section#feature .big-logo {
width: 100%; }
body section#title-bar {
height: 80px;
background: #1CAA98;
color: #FFF;
padding: 0;
margin: 0; }
body footer {
background: #333;
color: #FFF;
padding: 30px 0 20px 0; }
body footer li {
float: left;
padding: 0 10px 0 10px;
list-style: none; }
body footer a {
color: #FFF; }
body footer p {
float: right; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Adding Font Awesome icons to the app -->
<script src="https://use.fontawesome.com/7333e518d7.js"></script>
<title>Gamma: About</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand green-text" href="#">Gamma</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<section id="title-bar">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>About Gamma</h1>
</div>
</div>
</div>
</section>
</body>
</html>
Maybe I've overlooked something. Any help is appreciated.
You need to remove the top margin from the h1 tag itself and the bottom margin from the navbar-nav ul list, which is there by default browser styles.
This is due to padding-top: 4em; on the body, You need to use 56px (height of the navbar) instead, like:
body {
padding-top: 56px; // Height of the navbar
}
Have a look at the snippet below:
body {
background: #FFF;
padding-top: 56px; }
body .navbar {
margin-bottom: 0px; }
body .green-text {
color: #1CAA98 !important; }
body .jumbotron {
background: url(../img/site_showcase_bg.jpg) no-repeat top center;
color: #FFF;
height: 500px;
overflow: none; }
body .jumbotron img.app-btn {
width: 40%;
margin-right: 30px;
display: inline; }
body .jumbotron h1 {
margin-top: 60px; }
body .jumbotron p {
margin-bottom: 40px; }
body .jumbotron img.showCase-img {
max-width: 100%; }
body section#middle {
padding: 10px 0 40px 0; }
body section#middle img.demo-1 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#middle img.demo-2 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#middle img.demo-3 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
body section#feature {
background: #1CAA98;
color: #FFF;
padding: 40px;
overflow: auto; }
body section#feature ul li {
font-size: 22px;
list-style: none; }
body section#feature .big-logo {
width: 100%; }
body section#title-bar {
height: 80px;
background: #1CAA98;
color: #FFF;
padding: 0;
margin: 0; }
body footer {
background: #333;
color: #FFF;
padding: 30px 0 20px 0; }
body footer li {
float: left;
padding: 0 10px 0 10px;
list-style: none; }
body footer a {
color: #FFF; }
body footer p {
float: right; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Adding Font Awesome icons to the app -->
<script src="https://use.fontawesome.com/7333e518d7.js"></script>
<title>Gamma: About</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand green-text" href="#">Gamma</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<section id="title-bar">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>About Gamma</h1>
</div>
</div>
</div>
</section>
</body>
</html>
Hope this helps!
Related
The CSS display: works for the text elements, but it is not doing anything for <i> element. I am able to move it with float: right which is where I need it to be on my div but then the padding is off and a headache to deal with! Any feedback would be greatly appreciated :)
Part of my code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://use.fontawesome.com/37471687aa.js"></script>
</head>
<body>
<section class="container">
<nav>
<div class="arrow-left">
<i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
</div>
</nav>
<section class="restaurant-list">
<div class="location">
<div class="content">
<h1>Bakalaki Greek Taverna</h1>
<h3>Seng Poh Road 3, Singapore</h3>
</div>
<div class="arrow">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</section>
</section>
</body>
</html>
CSS:
body {
background-color: #333;
font-family: sans-serif;
font-size: 10px;
}
.container {
margin: 0 auto;
width: 420px;
}
nav {
box-sizing: border-box;
background-color: #000;
padding: 10px 0 15px 15px;
width: 100%;
}
.restaurant-list {
margin: 0 auto;
width: 100%;
}
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
float: left;
}
.location:hover {
background-color: #888;
}
.content {
display:block;
}
.content h1 {
font-size: 18px;
font-weight: bolder;
}
.content h3 {
font-size: 12px;
padding-top: 5px;
}
.arrow {
display: inline-block;
}
I feel like I am missing some detail here when I use display: inline-block on element arrow. I know the .arrow works because float: right; works for it. I don't know what I am missing here. I need the text to be on left of div and the arrow to be on the right.
if I understand you correctly, this will solve your problem :
Css:
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
/* You can solve the problem with Display flex. */
display: flex;
justify-content: space-between;
align-items: center;
}
Could you please try the following codes?
What I added are:
Add float: left; in the css class .content;
Add float: right; in the css class .arrow;
body {
background-color: #333;
font-family: sans-serif;
font-size: 10px;
}
.container {
margin: 0 auto;
width: 420px;
}
nav {
box-sizing: border-box;
background-color: #000;
padding: 10px 0 15px 15px;
width: 100%;
}
.restaurant-list {
margin: 0 auto;
width: 100%;
}
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
float: left;
}
.location:hover {
background-color: #888;
}
.content {
float: left;
display:block;
}
.content h1 {
font-size: 18px;
font-weight: bolder;
}
.content h3 {
font-size: 12px;
padding-top: 5px;
}
.arrow {
float: right;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://use.fontawesome.com/37471687aa.js"></script>
</head>
<body>
<section class="container">
<nav>
<div class="arrow-left">
<i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
</div>
</nav>
<section class="restaurant-list">
<div class="location">
<div class="content">
<h1>Bakalaki Greek Taverna</h1>
<h3>Seng Poh Road 3, Singapore</h3>
</div>
<div class="arrow">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</section>
</section>
</body>
</html>
I have made this div responsive in Bootstrap. But, the styling and formatting doesn't look quite right. When you click on the expand button, I feel like the "Sign Up" and "Login" sections should be in a separate section from the blue and the lines look messed up. How can I make this nav look more responsive and professional?
.navbar {
background: #007BC4 !important;
padding: 10px !important;
}
.nav a {
color: white !important;
}
#sign_up {
position: absolute;
left: 100%;
top: 100%;
transform: translatex(-50%);
}
#email_form, #password_form {
padding: 5px;
font-family: 'Open Sans', sans-serif;
border-radius: 3px;
border: 1px solid #007BC4;
}
#login_button {
background: #0092ea !important;
border: 1px solid #005c93;
font-weight: bold;
font-size: 14px !important;
}
#login_button:hover {
background: #007BC4 !important;
}
#remember_label {
color: white !important;
font-weight: normal !important;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}
#forgot_password {
color: white !important;
position: relative;
left: 65px;
font-size: 13px !important;
}
#remember {
position: relative;
top: 2px;
}
.navbar-brand{
height:auto;
padding: 0px 15px;
}
.navbar-brand img{ max-width:250px;width:100%;}
.navbar-nav > li > a{padding-top: 0;}
#media (max-width:1000px) {
.navbar-header {
float: left;
width:25%;
}
.navbar-brand{
width: 100%;
margin-top: 12px;
padding:0;
}
}
#media (max-width:767px) {
.navbar-header {
float: left;
width:100%;
margin-left: 0 !important;
}
.navbar-brand{
width: auto;
margin-top: 0px;
}
.navbar-brand img {
max-width: 200px;
}
.navbar-nav {
width: 100%;
float: left;
margin: 7.5px 0;
}
.navbar-nav > li > a{
padding: 10px 0;
}
.navbar-form{
float: left;
}
#sign_up {
position: relative;
left: 50%;
top: 0;
width: 100%;
padding: 8px 0px;
}
#email_form, #password_form{
margin-bottom: 5px;
width: 100%;
}
#login_button{
width: 100%;
}
}
<!-- CSS Files -->
<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button 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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</a>
</div>
<!-- Sign Up -->
<div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li> <button class="btn btn-success btn-sm" id='sign_up'> Sign Up </button> </li>
</ul>
<!-- Login -->
<div class='navbar-form navbar-right'>
<form action='#' method='post'>
<input type='text' placeholder='Email' id='email_form'>
<input type='text' placeholder='Password' type='password' id='password_form'>
<button class="btn btn-primary btn-sm" id='login_button'>Login</button>
</form>
<input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>
<a href='#' id='forgot_password'> Forgot Password? </a>
</div>
</div>
</div>
</div>
<!-- JS Files -->
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
do you mean like making your button responsive? if your using css, i'm guessing you know html right? make a link. thats what i'm suggesting. and to make it look professional, you basically just have to rely on gut instinct. (colors dude, what colors are professional anyway, beige?)
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>
TB3 here, and here's my jsfiddle. As you can see, all the content (the header, the main body and the footer) seem to be contained inside something that is causing it to be padded + centered. I would like all this content to take up 100% the width of the page/viewport.
I suspect that it may have something to do with the navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
...
...perhaps these classes "auto-pad" and "auto-center" by default and need to be overwritten? Any ideas as to where I'm going awry?
You need to remove the overall "container" to container-fluid that you have at the start of your document because that is what is containing and making it center.
$('.orgSelector').dropdown();
$('.orgSelector').tooltip();
.acLogo {
background-image : url("http://placehold.it/250x150");
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto
}
.form-signin .form-signin-heading, .form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.account-wall {
margin-top: 20px;
padding: 40px 0px 20px 0px;
background-color: #f7f7f7;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title {
color: #555;
font-size: 18px;
font-weight: 400;
display: block;
}
.profile-img {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.need-help {
margin-top: 10px;
}
.new-account {
display: block;
margin-top: 10px;
}
img.user-summary {
max-width: 100%;
height: auto;
}
div.user-summary {
margin: 10px auto;
}
div.user-summary > img {
width: 80px;
height: 80px;
float: left;
margin: 0 5px;
}
div.user-name {
margin: 15px 0 0 0;
font-style: italic;
display: block;
}
div.user-status {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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 acLogo" style="height:auto; width:50%;" href="/"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><b>FEATURES</b></li>
<li><b>COMPARE US</b></li>
<li><b>FIZZBUZZ</b></li>
<li><b>FOOBAR</b></li>
<li><b>DOCS</b></li>
</ul>
<form class="navbar-form navbar-right" action="/app/dashboard/search" method="POST">
<ul class="nav navbar-nav navbar-right">
<li><button type="button" class="btn btn-success">Sign up</button></li>
<li><a href="/app/dashboard">
<button type="button" class="btn btn-link">Sign in</button>
</a></li>
</ul>
</form>
</div>
</div>
</nav>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
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>