Learning over here. Creating a nav bar for my teams Wiki site and having issues with getting the submenu to display to the right of the right caret. The submenu instead shows up at the bottom of the dropdown menu but cannot be clicked on.
Any help is appreciated. My HMTL is below and then the CSS is below that.
<li class="dropdown">
For HM's<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<b>Campus</b>
<ul class="dropdown-menu">
<li>Intern HM Self Service Portal</li>
<li>Talent Management and Planning</li>
<li>Requisition Management</li>
<li class="dropdown-submenu">Managing an Intern</li>
<ul class="dropdown-menu">
<li>Intern Mentors Under Resources Tab</li>
</ul>
`
:root {
--awsui-grey-100: rgb(250,250,250); /* Oxygen */
--awsui-grey-200: rgb(234,237,237); /* Chromium */
--awsui-grey-300: rgb(213,219,219); /* Zinc */
--awsui-grey-400: rgb(170,183,184); /* Silver */
--awsui-grey-500: rgb(134,149,150); /* Platinum */
--awsui-grey-600: rgb(84,91,100); /* Mercury */
--awsui-grey-900: rgb(22,25,31); /* Lead */
--awsui-orange-500: rgb(236,114,17); /* Copper */
--awsui-orange-600: rgb(235,95,7); /* Bromine */
--awsui-blue-500: rgb(0,161,201); /* Argon */
--awsui-blue-600: rgb(0,125,188); /* Cobalt */
--awsui-green-500: rgb(106,175,53); /* Fluorine */
--awsui-green-600: rgb(30,137,0); /* Phosphorous */
--awsui-squid-ink: rgb(35,47,62); /* Squid Ink */
--awsui-squid-ink-transparent: rgba(35,47,62,.5); /* Squid Ink half opacity */
--awsui-amazon-orange: rgb(255,153,0); /* Amazon Orange */
--awsui-amazon-orange-transparent: rgb(255,153,0,0.5); /* Amazon Orange */
--base-type: var(--awsui-grey-200);
--base-header: var(--awsui-grey-100);
--base-inverted: var(--awsui-grey-900);
}
#sitewide-announcement-banner .hidden-print {
background: rgb(241, 250, 255)!important;
border: 1px solid var(--awsui-blue-600)!important;
color: var(--awsui-grey-900)!important;
padding: 14px 20px!important;
margin: 20px 0!important;
}
/*permissions thing, messes with header*/
#xdocPrimaryOwner {display: none;}
.main,
#docextrapanes {
/* background: var(--awsui-grey-200); */
}
.navbar #nav-links div {
color: #000000;
}
.navbar ul.nav.navbar-nav li a.icon-navbar:focus,
.navbar ul.nav.navbar-nav li a.icon-navbar:hover {
/* background-color:#36729e; */
background-color:#888888;
outline: initial;
}
.navbar #companylogo, .navbar #nav-create-page, .navbar #nav-search {
display: inline-block;
vertical-align: middle;
}
#menuview .navbar {
background: white;
box-shadow: 0 1px 1px 0 rgba(0,28,36,.5);
}
#headerglobalsearchinput {
height: 30px;
border: 1px solid var(--awsui-grey-600);
}
/* MISC STUFF */
/* Disabled the edit button because the WYSIWYG destroys content when transcluding the header */
#tmEdit {
display: none!important;
}
/*Edit buttons override */
.thisIsAPageView > .document-header {
width: 400px !important;
}
/* Disables a paragraph that gets injected between the header and navigation by the wiki */
.airwolf-header + p {
display: none;
}
.navbar #nav-create-page {
display: none;
}
/* TYPOGRAPHY */
body, p, a, li, h1, h2, h3, h4, h5, h6 {
font-family: "Amazon Ember", Helvetica, Arial, sans-serif;
}
body,
#body p,
#body a,
#body li,
#body h1,
#body h2,
#body h3,
#body h4,
#body h5,
#body h6 {
font-family: "Amazon Ember", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
}
#body h1,
#body h2,
#body h3,
#body h4,
#body h5,
#body h6 {
padding: 5px 0;
border-bottom: 1px solid rgba(0,0,0,0);
}
#body .special {font-size: 44px; line-height: 50px; font-weight: 300;}
#body h1:first-of-type {font-size: 28px; line-height: 40px; margin-top: 0px;}
#body h1 {font-size: 28px; line-height: 40px; font-weight: 700;}
#body h2 {font-size: 22px; line-height: 20px; font-weight: 700;}
#body h3 {font-size: 18px; line-height: 20px; font-weight: 700;}
#body h4 {font-size: 15px; line-height: 20px;}
#body h5 {font-size: 15px; line-height: 20px;}
#body h6 {font-size: 14px; line-height: 20px;}
/* WIKI MODS */
/* ========================================================================== */
/* Main content column */
#body #contentcontainer .main {
padding: 0 20px 20px;
}
.airwolf-header {
margin: 0 -20px!important;
width: auto!important;
}
/* Breadcrumbs*/
#hierarchy {
margin: 0 -20px;
padding: 10px 20px;
border-radius: 0;
background-color: var(--awsui-squid-ink);
position: relative;
z-index: 20;
box-shadow: 0 2px 0 2px rgba(0,0,0,.2);
}
#mainContentArea > .xcontent {
margin-top: 0;
}
.breadcrumb > li + li:before {color: var(--awsui-grey-300);}
.breadcrumb a {color: var(--awsui-grey-200);}
.breadcrumb > .active:last-of-type a {color: var(--awsui-grey-100);}
/* Document meta */
.xdocLastModification {
font-size: 10px;
position: absolute;
top: -60px;
margin: 0;
display: none;
}
.xdocLastModification .wikilink,
#body .xdocLastModification .wikilink a {
font-size: 10px;
}
.titleDivider {
display: none;
}
.document-header {
margin: 0;
position: relative;
z-index: 25;
top: -38px;
width: 250px;
float: right;
}
.document-header .document-menu,
.document-header .document-info {
margin: 0 auto;
padding: 0;
}
.document-header .document-menu {
width: 100%;
opacity: 0.1;
transition: .2s opacity ease;
}
.document-header .document-menu:hover {
opacity: 1;
}
.document-header .document-info {
pointer-events: none;
}
#document-title {
display: none;
}
#document-title h1 {
background: none;
}
#xwikicontent {
position: relative;
top: -35px;
}
#xwikicontent,
#docextrapanes {
/* background: var(--awsui-grey-200); */
}
.btn, input.button {
background-image: none;
background-color: var(--awsui-grey-100);
color: var(--awsui-grey-900);
border: 1px solid var(--awsui-grey-600);
font-weight: 700;
padding: 4px 20px;
}
.btn:hover, input.button:hover {
background-color: var(--awsui-grey-200);
background-image: none;
border: 1px solid var(--awsui-grey-900);
color: var(--awsui-grey-900);
}
.edit_section {
overflow: visible;
top: -11px;
opacity: 0.2;
transition: .2s opacity ease;
}
.edit_section:hover {
opacity: 1;
}
.edit_section + * {
clear: both;
}
.wikimodel-emptyline {
display: block;
}
#footerglobal {
z-index: 1;
}
/* Limits content to a fake content column */
#media screen and (min-width: 1200px) {
.airwolf-header ~ *:not(.navbar-inverse) {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
}
#media screen and (max-width: 768px) {
#menuview, #sitewide-announcement-banner {
display: none;
}
.btn-demo {
display: none;
}
.amazon-wiki-toc {
display: none;
}
.edit_section {
display: none;
}
.document-header {
opacity: 0;
pointer-events: none;
}
.navbar-collapse {
background-color: #121821!important;
margin: 2px -20px 0 -30px;
border: none!important;
padding-left: 50px;
}
.dropdown-header {
color: #aaaaaa!important;
}
}
#media (min-width: 768px) {
.navbar-collapse {
background-color: transparent!important;
}
}
/************************************
* Airwolf header - stripe animation
************************************/
.airwolf-header {
margin: 0 auto;
background-color: rgb(35,47,62);
position: relative;
width: 100%;
height: 170px;
overflow: hidden;
}
.airwolf-header::after {
z-index: 1;
box-shadow: 0 0 240px 240px rgba(0,0,0,.5);
content: '';
background: red;
width: 340px;
height: 340px;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.airwolf-header-title {
z-index: 2;
font-family: "Amazon Ember", Helvetica, Arial, sans-serif;
letter-spacing: 2px;
position: absolute;
color: rgb(250,250,250);
top: 40px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
line-height: 1.4;
font-weight: 700;
}
.airwolf-header-title::after {
z-index: 2;
display: block;
content: '';
width: 100%;
height: 1px;
background: rgb(255,153,0);
}
.airwolf-header-subtitle {
z-index: 2;
font-family: "Amazon Ember", Helvetica, Arial, sans-serif;
letter-spacing: 2px;
position: absolute;
color: rgb(250,250,250);
top: 99px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
line-height: 1.4;
font-weight: 700;
}
.airwolf-header-stripe-shine {
position: absolute;
content: '';
background: white;
width: 100%;
height: 20px;
transform: rotate(-70deg);
animation-duration: 6s;
animation-name: shine;
animation-iteration-count: infinite;
}
.airwolf-header-stripe-shine.two {
height: 10px;
animation-duration: 3s;
}
.airwolf-header-stripe-fade {
display: block;
width: 1000px;
height: 50px;
background: rgb(236,114,17);
margin-left: -50px;
margin-top: -50px;
transform: rotate(-20deg);
animation-duration: 6s;
animation-name: fadeInOut;
animation-iteration-count: infinite;
}
.airwolf-header-stripe-fade.one {
background: rgb(255,153,0);
margin-bottom: 10px;
animation-duration: 6s;
}
.airwolf-header-stripe-fade.two {
background: rgb(236,114,17);
margin-bottom: 75px;
animation-duration: 17s;
}
.airwolf-header-stripe-fade.three {
background: rgb(236,114,17);
margin-bottom: 10px;
animation-duration: 7s;
}
.airwolf-header-stripe-fade.four {
animation-name: fadeInOutDark;
background: rgb(35,47,62);
margin-bottom: 30px;
animation-duration: 9s;
}
.airwolf-header-stripe-fade.five {
background: rgb(255,153,0);
margin-bottom: 150px;
animation-duration: 13s;
}
#keyframes shine {
0% {
transform: rotate(-90deg);
left: -100%;
background: rgba(255,255,255,0);
}
15% {
transform: rotate(-70deg);
}
25% {
left: 50%;
background: rgba(255,255,255,0.05);
}
100% {
transform: rotate(-90deg);
left: 150%;
background: rgba(255,255,255,0);
}
}
#menuview .navbar-brand {
width: 100px;
height: 25px;
margin-left: 5px;
display: block;
background-size: 100%;
}
#menuview .navbar-brand img {
display: none;
}
.navbar li.navbar-help-menu > a.dropdown-toggle {
color: var(--awsui-grey-900);
}
#keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 0.9;
}
100% {
opacity: 0;
}
}
#keyframes fadeInOutDark {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 0;
}
}
/************************************
* Navbar
************************************/
li {
display: block;
transition-duration: 0.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
.navbar-nav.navbar-center {
position: relative;
left: 50%;
transform: translatex(-50%);
}
.navbar-inverse {
width: 100%;
display: inline-block;
top: -45px;
background-color: transparent!important;
background-image: none!important;
border: none;
z-index: 2;
}
/* Menu Hover */
.navbar-inverse .navbar-nav > li > a {
color: #fff!important;
padding-top: 5px;
padding-bottom: 5px;
}
/* Menu Hover */
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:active {
background: rgb(236,114,17);
color: #000!important;
}
/* Menu Click After */
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
background: rgb(236,114,17);
color: #000!important;
}
.dropdown-menu {
margin: 2px 0 0 -1px;
}
/* Dropdown Menu Hover */
.dropdown-menu li > a:active,
.dropdown-menu li > a:focus,
.dropdown-menu li > a:hover {
position: relative;
background: rgb(236,114,17);
color: #000!important;
outline: initial;
}
.dropdown-header {
font-weight: 900;
color: #232f3e;
text-transform: uppercase;
margin-left: -5px!important;
}
/* Menu Collapsed Mode */
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
background: rgb(236,114,17);
color: #000!important;
outline: initial;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
padding-left: 5px;
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
li {
display: block;
transition-duration: 0.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
/************************************
* TOC flyout modal
************************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 320px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left .modal-content,
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.left .modal-body,
.modal.right .modal-body {
padding: 15px 15px 80px;
}
/*Modal fly from left*/
.modal.left.fade .modal-dialog{
left: -320px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.in .modal-dialog{
left: 0;
}
/* Modal style */
.modal-content {
border-radius: 0;
border: none;
top: 201px;
}
.modal-header {
background-color: #dddddd;
color: #000000;
margin-top: -30px;
text-align: center;
font-weight: 700;
padding: 10px 10px 0px 10px;
}
.modal-body {
margin-top: -30px;
}
/* TOC button */
.btn-demo {
margin: 0px;
padding: 10px 15px;
border-radius: 0;
font-size: 16px;
background-color: #232f3e;
color: #ffffff;
left: 0!important;
position: fixed;
width: 170px;
height: 50px;
top: 40%;
transform: rotate(-90deg);
margin-left: -60px;
}
.btn-demo:hover,
.btn-demo:focus {
outline: 0;
background: rgb(236,114,17)!important;
color: #000000;
}
I like to create a menu only with HTML and CSS to use in my web application that:
some items could have sub menus
it is responsive
use a hamburger for mobile
could be switch between horizontal and vertical on desktops
For example, I have this horizontal menu at the top of the page
enter image description here
from this code (you can see the result in the full screen)
:root {
--main-bg-color: #000;
--main-txt-color: #FFF;
--hover-color: #fada04;
--mobile-bg-color: #f6f6f6;
--mobile-bg-color-level2: #fff;
--mobile-txt-color: #666;
--g1: #FDE100;
--g2: #D6A71D;
}
.menu-toggle {
display: block;
}
.headermenu {
padding: 8px 0;
vertical-align: sub;
letter-spacing: 1px;
margin: 0 0 0px 0;
display: block;
height: 26px;
width: auto;
clear: both;
z-index: 999;
}
.headermenu ul {
padding: 0;
margin: 0;
width: 100%;
float: left;
position: relative;
background-color: var(--main-bg-color);
list-style: none;
}
.top-menu li.active {
background-image: linear-gradient(var(--g1), var(--g2));
}
.top-menu li.active>a {
color: var(--main-txt-color);
}
.top-menu li {
position: relative;
background: var(--main-bg-color);
white-space: nowrap;
*white-space: normal;
-webkit-transition: background .2s;
transition: background .2s;
}
.top-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 999;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
min-width: fit-content;
}
.top-menu>li {
float: left;
}
.top-menu li:hover>ul {
display: block;
}
.top-menu a {
display: block;
position: relative;
padding: .75em 1em;
text-decoration: none;
color: var(--main-txt-color);
}
.top-menu a:hover {
color: var(--hover-color);
}
.top-menu ul ul {
top: 0;
left: 100%;
}
.top-menu .sf-with-ul {
padding-right: 2.5em;
*padding-right: 1em;
}
.top-menu .sf-with-ul:after {
content: '';
position: absolute;
top: 50%;
right: 1em;
margin-top: -3px;
height: 0;
width: 0;
border: 5px solid transparent;
border-top-color: rgba(255, 255, 255, .5);
}
.top-menu>li>.sf-with-ul:focus:after,
.top-menu>li:hover>.sf-with-ul:after {
border-top-color: white;
}
.top-menu ul .sf-with-ul:after {
margin-top: -5px;
margin-right: -3px;
border-color: transparent;
border-left-color: rgba(255, 255, 255, .5);
}
.top-menu ul li>.sf-with-ul:focus:after,
.top-menu ul li:hover>.sf-with-ul:after {
border-left-color: white;
}
.mobile-menu,
.hamburger {
display: none;
}
ul.top-menu.mobile {
display: none;
}
/* --- mobile (20201207 SDE)*/
#media all and (max-width: 1000px) {
element.style {
display: block;
}
.top-menu li.active {
background-image: initial;
}
.top-menu li.active>a {
color: initial;
}
ul {
list-style: none;
}
.headermenu ul {
padding: initial;
margin: initial;
width: initial;
float: initial;
position: initial;
background-color: initial;
list-style: none;
}
.top-menu li {
position: initial;
background: initial;
white-space: initial;
*white-space: initial;
-webkit-transition: initial;
transition: initial;
}
.top-menu ul {
position: initial;
display: initial;
top: initial;
left: initial;
z-index: initial;
box-shadow: initial;
min-width: initial;
}
/* .top-menu > li {
float: initial;
}*/
.top-menu>li {
float: initial;
/*margin: 1px 0;*/
border: 1px;
position: relative;
background-color: var(--mobile-bg-color);
/*background-color: #f6f6f6;*/
}
.top-menu li:hover>ul {
display: none;
}
.top-menu a:hover {
color: initial;
}
.menu-toggle {
display: block;
color: #fff;
padding: 15px;
font-size: 35px;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
background: #151515;
}
.sublist-toggle {
top: 0;
right: 0;
color: #fff;
width: 55px;
height: 55px;
padding: 15px;
cursor: pointer;
font-size: 15px;
font-weight: bold;
position: absolute;
text-transform: uppercase;
border-left: 1px solid #fff;
background: url(images/toggle-black.png) center no-repeat;
}
.top-menu {
display: none;
}
.top-menu>li {
float: initial;
position: relative;
background-color: var(--mobile-bg-color);
}
.top-menu .sublist {
display: none;
padding: 5px 0;
background-color: #fff;
}
.top-menu a {
color: #666;
padding: 18px;
display: block;
font-size: 25px;
text-decoration: none;
}
.top-menu .sublist li {
position: relative;
margin: 1px 0 1px 20px;
}
.sf-with-ul {
cursor: pointer;
}
/* BEOF Hamburger */
.hamburger {
padding: 15px 15px 0px 0px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
float: right;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger.is-active:hover {
opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #000;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
vertical-align: top;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: white;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
/* EOF Hamburger */
}
<ul class="top-menu">
<li class="active">Home</li>
<li><a class="sf-with-ul" href="/jeans">Jeans</a>
<div class="sublist-toggle"></div>
<ul class="sublist">
<li style="">Wide leg jeans</li>
<li style="">Straight jeans</li>
<li style="">Loose jeans</li>
</ul>
</li>
<li><a class="sf-with-ul" href="/shorts">Shorts</a>
<div class="sublist-toggle"></div>
<ul class="sublist">
<li style=""><a class="sf-with-ul" href="/sweet_jersey">Sweet jersey shorts</a>
<div class="sublist-toggle"></div>
<ul class="sublist">
<li style="">Jersey1</li>
<li style="">Jersey2</li>
</ul>
</li>
<li style="">Denim shorts</li>
</ul>
</li>
<li>Skirts</li>
<li>Blazers</li>
</ul>
I can't find a way to transform the menu above in vertical menu like this one
enter image description here
I have done a bit of the basics to point you in the right direction. You can build on this to make it responsive, hamburger, etc...
The menu should have this format. The submenu is nested in the list element of the parent. The span in the parent is the button we click to open the submenu. Each submenu parent has a corresponding span with a unique incremental id.
<div class="sidemenu">
<ul class="top">
<li>Home</li>
<li class="toggle">Jeans<span id="span1" onclick="openSub(1)">+</span>
<ul id="sub1">
<li>Wide</li>
<li>Straight</li>
<li>Loose</li>
</ul>
</li>
<li class="toggle">Shorts<span id="span2" onclick="openSub(2)">+</span>
<ul id="sub2">
<li>Sweet<span id="span3" onclick="openSub(3)">+</span>
<ul id="sub3">
<li>Jersey1</li>
<li>Jersey2</li>
</ul>
</li>
<li>Denim</li>
</ul>
</li>
<li>Skirts</li>
<li>Blazers</li>
</ul>
</div>
We will have to use JS to open and close the submenus when the correct span is clicked.
The first 6 lines hide the submenus by default when the page is loaded.
The openSub() function takes a number representing the submenu we want to open (1 for jeans, 2 for shorts, etc...)
The function then identifies the submenu we want to open, and toggles it to display. The next line changes the text of the span from "+" to "-" to represent an open submenu. If the span is clicked again, the submenu is closed and the text goes back to its default.
var toggle = document.getElementById("sub1");
toggle.style.display = "none";
var toggle = document.getElementById("sub2");
toggle.style.display = "none";
var toggle = document.getElementById("sub3");
toggle.style.display = "none";
function openSub(caller) {
var toggle = document.getElementById("sub"+caller);
toggle.style.display = toggle.style.display === 'none' ? '' : 'none';
document.getElementById("span"+caller).textContent = document.getElementById("span"+caller).textContent === "+" ? '-' : '+';
}
CSS used mostly for styling:
.sidemenu {
width: 250px;
height: 100vh;
background: lightblue;
}
ul.top {
list-style-type: none;
}
ul.top li {
width: 100%;
height: auto;
min-height: 50px;
margin: 10px 0;
padding: 20px 0 0 10px;
}
ul.top li span {
float: right;
}
#sub1, #sub2, #sub3 {
margin-top: 25px;
padding-left: 15px;
}
li {
width: 100%;
height: 50px;
}
span {
padding-right: 25px;
}
I'm trying to float: right my the email/tel and toggle menu button to the right side of the page but have it in the order: email/tel/toggle menu button (toggle menu button on the furthest right). I want the items to push each other across as the window narrows and then I already have a #media to get rid of the tel and email at a certain width.
The toggle menu button is ahead of my contact details but I figured that if they were all set to float right then then order that you put them in the html should determine how they appear on the page?
Also, as another question, my children menu of drop down menu (under services in my code pen) don't line up with the main header, what css do I need to add/change to fix this?
CSS
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
background-color: #f5f5f5; /*light grey*/
/*background-color: #00ffff; light blue */
letter-spacing: .18em;
}
/*This CSS is for the header*/
/*This CSS is for the logo, name, tele, email*/
h1 {
/*The line height = div height centers everything inside div*/
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.teleHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.emailHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.teleHeader a, .emailHeader a {
color: red;
font-weight: bold;
font-family: "Open Sans";
}
/*CSS for the navbar menu*/
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none; /* This removes all the bullet points from all unordered lists*/
} /*I need to keep this as it styles the navbar*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
.toggleContainer (
display:inline-block;
float: right;
width: auto;
)
.toggle-menu {
width: 50px;
height: 50px;
top: 10px;
position: absolute;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
overflow: hidden;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop down menus in the headers*/
ul li ul.services-dropdown{
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown{
display: inline-block; /* Display the dropdown */
position:relative;
}
ul li ul.services-dropdown li{
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 3.5vw;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1420px) {
.narrow-hide{
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
HTML
<header>
<div class="header-top clearfix">
<h1 class="l-left">
<a href="Home Page.html">
<img style="margin-top: 10px; margin-right: 20px;" alt="Logo" src="../Logo/Vector Logo.png" width="60px" height="50px">
</a>
</h1>
<h1 class="l-left">
<a href="Home Page.html">
Great <span class="edit-name" style="font-family:arial black">Things</span>
</a>
</h1>
<div class="teleHeader">
<span class="narrow-hide" ">
<a>
TEL: +44 (0) 111111111
</a>
</span>
</div>
<div class="emailHeader">
<span class="narrow-hide">
<a>
EMAIL: info#awesome.co.uk
</a>
</span>
</div>
<div class="toggleContainer">
<a class="l-right toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
#Services
<ul class="services-dropdown">
<li>Hi</li>
<li>There</li>
<li>How</li>
<li>Funny</li>
</ul>
</li>
<li>
More
</li>
<li>
Stuff
</li>
<li>
k
</li>
</ul>
</nav>
</header>
Script
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
CODEPEN: https://codepen.io/Ribeye/pen/qBbJRMa
I would recommend you going for using flexbox, it will be much easier then trying to align inline-block elements.
Here is a good ressource on how to use flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
As said by #Mark-Att, you can use flexbox to overcome this issue.
I've modified your HTML and added corresponding CSS. Try viewing the result in a full page and you will see the results.
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$header_top.toggleClass('open-menu');
});
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
background-color: #f5f5f5; /*light grey*/
/*background-color: #00ffff; light blue */
letter-spacing: .18em;
}
/*This CSS is for the header*/
/*This CSS is for the logo, name, tele, email*/
h1 {
/*The line height = div height centers everything inside div*/
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.general-info{
display: flex;
align-content: end;
flex-direction: row;
justify-content: flex-end;
}
.teleHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.emailHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
margin-right: 20px;
}
.teleHeader a, .emailHeader a {
color: red;
font-weight: bold;
font-family: "Open Sans";
}
/*CSS for the navbar menu*/
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none; /* This removes all the bullet points from all unordered lists*/
} /*I need to keep this as it styles the navbar*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
overflow: hidden;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop down menus in the headers*/
ul li ul.services-dropdown{
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown{
display: inline-block; /* Display the dropdown */
position:relative;
}
ul li ul.services-dropdown li{
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 3.5vw;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1420px) {
.narrow-hide{
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="header-top clearfix">
<h1 class="l-left">
<a href="Home Page.html">
<img style="margin-top: 10px; margin-right: 20px;" alt="Logo" src="../Logo/Vector Logo.png" width="60px" height="50px">
</a>
</h1>
<h1 class="l-left">
<a href="Home Page.html">
Awesome <span class="edit-name" style="font-family:arial black">Cakes</span>
</a>
</h1>
<div class="general-info">
<div class="teleHeader">
<span class="narrow-hide">
<a>
TEL: +44 (0) 11111111
</a>
</span>
</div>
<div class="emailHeader">
<span class="narrow-hide">
<a>
EMAIL: info#yay.com
</a>
</span>
</div>
<a class="l-right toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
Services
<ul class="services-dropdown">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
</li>
<li>
abc
</li>
<li>
abc
</li>
</ul>
</nav>
</header>
I'm creating this navigation, learning how to develop responsive navigation menus. And I can't get the a tag in the menu to go full height leaving this 5px margin between the nav and the border when you hover over the buttons. I've spent quite some time trying to figure this out and googling, however I think I need someones help.
Notice in this image when I hover over the a link theres about 5px of margin between the bottom of the of a link and the nav. Example of Problem
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
a {
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
<div class="container">
Test Navigation
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<!-- Main Navigation -->
<ul class="menu">
<li>Our Work</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</header>
.header li a {
display: block;
padding: 20px 25px; /*increase the left padding by 5px */
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
Do you want to reduce the padding of the "a" tag? If so change the padding as below -
.header li a {
display: block;
padding: 5px 5px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
Otherwise let us know your query clearly with a picture as what change are you expecting. It is really difficult to figure out exactly what you want..
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
a {
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 5px 5px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
<div class="container">
Test Navigation
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<!-- Main Navigation -->
<ul class="menu">
<li>Our Work</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</header>
I would like to see my menu links.
I have implemented a CSS dropdown menu using the checkbox hack.
I have attached an icon to the bottom of the menu. When triggered, the menu drags the icon down along with it.
However, the icon's "margin" (according to dev tools) covers the entire width of the menu, such that the only way to display the links in the menu is to make the menu drop down significantly lower, changing:
#navbar-checkbox:checked + .menu ul {
max-height: 50px; ==============> 75px
z-index: 3;
}
I have tried just about everything I can think of: from z-index, to all kinds of positions, to transparent to opacity etc.
I simply want to display the links.
body {
background-color: purple;
}
.menu {
padding: 15px 15px 0px 15px;
background: transparent;
min-height: 2.75em;
line-height: 0em;
border-bottom: 1px solid white;
position: relative;
}
.logo {
color: white;
transition: 0.4s ease-in-out;
}
#logo {
background-image: url("http://www.rocstarr.com/Tipapalooza/files/tipapalooza-icon-100x100.png");
background-repeat: no-repeat;
background-color: transparent;
background-size: 80%;
display: block;
margin-top: 35px;
margin-bottom: -10px;
height: 50px;
width: 50px;
transition: 0.4s ease-in-out;
z-index: 2;
}
.logo:hover {
color: mediumturquoise;
transition: 0.4s ease;
}
.menu .logo div {
position: absolute;
width: 200px;
margin-top: -20px;
}
.logo p {
margin-left: 15px;
margin-top: 35px;
font-size: 20px;
font-weight: 800;
font-family: 'Coustard', serif;
}
.menu ul {
font-family: 'Open Sans', sans-serif;
color: white;
transition: max-height 0.4s linear 0;
margin: 0;
padding: 0;
text-align: right;
}
.menu a {
text-decoration: none;
color: white;
transition: 0.4s ease-in-out;
}
.menu a:hover {
color: black;
transition: 0.4s ease-in-out;
}
.menu li {
display: inline-block;
padding: .45em 1.1em;
}
#media(max-width:321px){
#logo {
margin-left: 5%;
}
}
#media (min-width: 0px) {
.menu ul {
max-height: 0;
overflow: hidden;
}
.menu li {
visibility: visible;
display: inline-block;
padding: 4em 0 0.5em;
border: none;
margin-right: 4px;
}
.menu .navbar-handle {
display: block;
}
#navbar-checkbox:checked + .menu ul {
max-height: 50px;
z-index: 3;
}
#navbar-checkbox:checked + .menu li {
visibility: visible;
}
#navbar-checkbox:checked + .menu .navbar-handle,
#navbar-checkbox:checked + .menu .navbar-handle:after,
#navbar-checkbox:checked + .menu .navbar-handle:before {
border-color: white;
}
}
.navbar-handle {
display: none;
cursor: pointer;
position: relative;
font-size: 45px;
padding: .5em 0;
height: 0;
width: 1.6666666666666667em;
border-top: 0.13333333333333333em solid;
}
.navbar-handle:before,
.navbar-handle:after {
position: absolute;
left: 0;
right: 0;
content: ' ';
border-top: 0.13333333333333333em solid;
}
.navbar-handle:before {
top: 0.37777777777777777em;
}
.navbar-handle:after {
top: 0.8888888888888888em;
}
.menu {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.menu .navbar-handle {
position: absolute;
font-size: 1.2em;
top: 1.3em;
color: white;
right: 25px;
z-index: 10;
}
.navbar-checkbox {
display: none;
}
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
<a class="logo" href="http://myapp.com">
<div class="logo">
<p>myapp.com</p>
</div>
</a>
<ul>
<li>how it works
</li>
<li>about us
</li>
<li>contact
</li>
</ul>
<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
</nav>
Inorder to see the links visible just try to adjust the padding of .menu li padding: 4em 0 0.6em; to padding: 2em 0 0.6em;
here are corrections:
put these before
<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
<ul></ul>
these style must be added and edited
#logo {float: left;}
#navbar-checkbox:checked + .menu ul {
max-height: 75px;}
My advice:
#navbar-checkbox:checked + .menu ul {
display: block;
}
#navbar-checkbox + .menu ul {
display: none;
}
Do not use height as parameter.