Menu
I have created a menu using Bootstrap 3 on a website. This menu works fine in every browser I have tested in, and at any screen size.
Except Safari on iOS, where the menu did not appear at all.
Using CSS, I forced the container of the menu to fill the width and to be 640px tall. Then I could see the menu. So the problem seems to be with overflow.
However, the containers parent and grandparent has an accumulated padding which makes no difference in any browser (that I have tested) except for in Safari on iOS. This can be seen in screetshot number 2.
Clearifying some terms
The menu is refering to the <ul> element with id header-menu. This is marked RED in the screenshot below.
The parent is refering to the immidiate parent, with class navbar-ex1-collapse. This is marked BLUE in the screenshot below.
Recreating the problem
I was finally able to recreate the same problem in Chrome by adding position: absolute; to the parent.
Screenshots
Check out the code snippet:
(function($){
$("#header-menu .menu-item-has-children > a, #header-menu .menu-item-has-children > span.after").on('click', function(e) {
e.preventDefault();
if( $(this).parent().hasClass('hide-sub') ){
$(this).parent().addClass("show-sub").removeClass("hide-sub");
}else{
$(this).parent().addClass("hide-sub").removeClass("show-sub");
}
});
$("#header-menu .close-menu-button > span.before").on('click', function(e) {
e.preventDefault();
if( $(this).parent().parent().parent().hasClass('hide-sub') ){
$(this).parent().parent().parent().addClass("show-sub").removeClass("hide-sub");
}else{
$(this).parent().parent().parent().addClass("hide-sub").removeClass("show-sub");
}
});
})(jQuery);
@charset "utf-8";
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#header-menu {
float: right
}
@media (max-width: 991px) {
.navbar-default .navbar-toggle {
background: rgba(255, 255, 255, 0.05);
border: 0 none;
border-radius: 0
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #d23479
}
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #fff
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #d23479
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
background: rgba(255, 255, 255, 0.25);
border: 0;
box-shadow: none
}
.navbar-collapse {
margin-top: 10px
}
}
@media(max-width:991px) {
.navbar-nav>li>a {
line-height: 70px;
}
.nav>li {
font-size: 35px;
}
.navbar-nav {
width: 100%;
text-align: center;
margin: 0px;
}
}
/*meny*/
@media (min-width: 992px) {
#header-menu .only-mobile,
#header-menu a span {
display: none !important;
}
#header-menu > li {
position: static;
}
#header-menu > li > a {
display: inline-block;
}
#header-menu > li > a:active {
color: #d23479;
}
#header-menu > li > a:focus {
color: white;
}
#header-menu > li > ul.sub-menu {
display: block;
background-color: white;
padding: 30px;
width: 100%;
height: 100vh;
min-height: 640px;
max-height: 768px;
position: absolute;
z-index: 100;
left: 0;
}
#header-menu > li > ul.sub-menu > li {
display: table;
width: 100%;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu {
display: table-row;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li {
display: table-cell;
width: 25%;
padding: 15px;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li:first-of-type {
padding: 15px 15px 15px 0;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li:last-of-type {
padding: 15px 0 15px 15px;
}
#header-menu > li > ul.sub-menu > li.sub-menu-row:first-of-type > ul.sub-menu > li a {
display: block;
padding: 5px;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
font-size: 14px;
color: black;
border-width: 0 0 1px 0;
border-style: solid;
margin: 0 0 10px 0;
font-weight: 600;
border-color: #d23479;
text-transform: uppercase;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li {
width: 100%;
}
#header-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
color: gray;
font-size: 12px;
}
#header-menu .sub-menu-row {
display: block;
width: 100%;
}
#header-menu .sub-menu-row:nth-of-type(2) {
margin-top: 50px;
border-width: 1px 0 0 0;
border-color: lightgray;
border-style: solid;
}
#header-menu .sub-menu-row:nth-of-type(2) > ul.sub-menu > li > a {
text-transform: none;
font-weight: 300 !important;
border: none;
}
#header-menu .contact a {
color: #d23479 !important;
}
#header-menu [class*="icon-"]:before {
font-size: 26px;
color: #d23479;
float: left;
margin: 0 10px;
position: relative;
}
#header-menu > .menu-item-has-children > span {
cursor: pointer;
}
#header-menu > .menu-item-has-children > span:after {
margin: 0 0 0 5px;
display: inline-block;
}
#header-menu > .menu-item-has-children.hide-sub > span.after:before {
content: '';
background-image: url('https://boxdev.no/box/wp-content/themes/box/icons/DropDown-Arrow.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
width: 15px;
height: 15px;
}
#header-menu > .menu-item-has-children.show-sub > span.after:before {
background: none;
content: '×';
font-size: 27px;
font-weight: 300;
line-height: 1.2em;
font-family: serif;
vertical-align: middle;
color: #d23479;
}
#header-menu > .menu-item-has-children.hide-sub > .sub-menu {
display: none;
}
#header-menu > .menu-item-has-children.show-sub > .sub-menu {
display: block;
}
#header-menu .sub-menu .close-menu-button {
display: block;
position: absolute;
bottom: 130px;
}
#header-menu .sub-menu .close-menu-button span.before {
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
cursor: pointer;
}
#header-menu .sub-menu .close-menu-button span.before:before {
content: '×';
color: #d23479;
font-size: 42px;
font-family: serif;
font-weight: bold;
line-height: 32px;
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#header-menu .sub-menu .close-menu-button span.before:after {
content: 'Lukk meny';
text-transform: uppercase;
color: #ccc;
font-size: 12px;
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
@media (max-width: 991px) {
#header-menu button.navbar-toggle {
display: inline-block;
width: 42px;
height: 32px;
background-color: #d23479;
position: absolute;
top: 15px;
right: 30px;
}
#header-menu button.navbar-toggle:before {
content: '×';
color: white;
font-family: serif;
font-size: 32px;
vertical-align: top;
line-height: 16px;
}
#header-menu {
background-color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: 100%;
z-index: 10;
overflow: scroll;
margin-top: 0;
padding: 102px 20px 20px 20px;
}
#header-menu .only-computer {
display: none !important;
}
#header-menu > li,
#header-menu .sub-menu li {
text-align: left;
border-top: 1px solid #ccc;
}
#header-menu .show-sub > ul.sub-menu {
border-top: 1px solid #ccc;
}
#header-menu a {
display: inline-block;
line-height: 1.4em;
text-transform: uppercase;
font-weight: 400;
padding: 0;
color: #222;
font-size: 18px;
}
#header-menu ul.sub-menu > li > ul.sub-menu > li > a {
color: #444;
font-size: 15px;
}
#header-menu ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
color: #666;
font-size: 13px;
font-weight: 300;
}
#header-menu > li > a:active,
#header-menu > li.show-sub > a {
color: #d23479;
}
#header-menu ul.sub-menu {
padding-left: 15px;
}
#header-menu .menu-item-1350 > .sub-menu {
padding: 0;
}
#header-menu .sub-menu-row {
display: block;
width: 100%;
}
#header-menu .sub-menu > li:first-of-type,
#header-menu .sub-menu-row,
#header-menu .bottom-contact-info,
#header-menu .bottom-contact-info li {
border: none !important;
}
#header-menu .menu-item-has-children.hide-sub span {
display: none;
}
#header-menu .menu-item-has-children.hide-sub > a {} #header-menu .menu-item-has-children > a {
width: 100%;
display: inline-block;
background-repeat: no-repeat;
background-size: 22px 22px;
background-position: 98% 50%;
}
#header-menu .menu-item-has-children.hide-sub > a {
background-image: url('https://boxdev.no/box/wp-content/themes/box/icons/down-arrow-menu.png');
}
#header-menu .menu-item-has-children.show-sub > a {
background-image: url('https://boxdev.no/box/wp-content/themes/box/icons/right-arrow-menu.png');
}
#header-menu .menu-item-has-children.hide-sub > .sub-menu {
display: none;
}
#header-menu .menu-item-has-children.show-sub > .sub-menu {
display: block;
}
#header-menu > li:first-of-type,
#header-menu .bottom-contact-info > .sub-menu {
border-top: 1px solid #d23479;
padding: 0;
}
#header-menu .bottom-contact-info a {
color: #333;
}
#header-menu [class*="icon-"]:before {
font-size: 20px;
color: #d23479;
margin: 0 10px;
position: relative;
text-transform: none;
}
#header-menu > .menu-item-has-children > span {
cursor: pointer;
}
#header-menu > .menu-item-has-children > span:after {
margin: 0 0 0 5px;
display: inline-block;
}
#header-menu .inactive > a,
#header-menu .inactive > span,
#header-menu a span {
display: none;
}
#header-menu .logo {
position: absolute;
top: 10px;
left: 30px;
border: 0;
}
#header-menu .logo > a {
background-image: url('https://boxdev.no/box/wp-content/themes/box/images/logo.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 34px;
width: 167px;
}
}
/* Fixing the menu for Safari on iOS */
.dropdown-backdrop {
position: static !important;
}
.navbar-ex1-collapse {
z-index: 99999;
}
.collapse.in {
background-color: white;
width: 100%;
height: 640px;
position: fixed;
display: block;
overflow: scroll;
position: static !important;
}
#header-menu {
z-index: 99999 !important;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex1-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse navbar-ex1-collapse collapse" aria-expanded="false" style="height: 0px;">
<ul id="header-menu" class="nav navbar-nav main_menu">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"></button>
<li id="menu-item-956" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-956"><span class="before"></span><a href="#prosjekter">Prosjekter</a><span class="after"></span>
</li>
<li id="menu-item-1502" class="hide-sub menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1502"><span class="before"></span><a href="#tjenester">Tjenester</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1350" class="sub-menu-row inactive menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1350"><span class="before"></span><a href="#"><span>Undermeny</span></a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1317" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1317"><span class="before"></span><a href="#">Nettsteder</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1503" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1503"><span class="before"></span><a href="#responsiv-hjemmeside">Responsiv Hjemmeside</a><span class="after"></span>
</li>
<li id="menu-item-1504" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1504"><span class="before"></span><a href="#nettbutikk">Nettbutikk</a><span class="after"></span>
</li>
<li id="menu-item-1318" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1318"><span class="before"></span><a href="#landingsider">Landingsider</a><span class="after"></span>
</li>
<li id="menu-item-1332" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1332"><span class="before"></span><a href="#">WordPress</a><span class="after"></span>
</li>
<li id="menu-item-1333" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1333"><span class="before"></span><a href="#">Webdesign</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1314" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1314"><span class="before"></span><a href="#">Synlighet</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1505" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1505"><span class="before"></span><a href="#google-annonsering">Google Annonsering</a><span class="after"></span>
</li>
<li id="menu-item-1335" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1335"><span class="before"></span><a href="#">Facebook Annonsering</a><span class="after"></span>
</li>
<li id="menu-item-1316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1316"><span class="before"></span><a href="#sokemotoroptimalisering">Søkemotoroptimalisering</a><span class="after"></span>
</li>
<li id="menu-item-1507" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1507"><span class="before"></span><a href="#fa-flere-henvendelser">Få flere henvendelser</a><span class="after"></span>
</li>
<li id="menu-item-1315" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1315"><span class="before"></span><a href="#konverteringsoptimalisering">Konverteringsoptimalisering</a><span class="after"></span>
</li>
<li id="menu-item-1509" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1509"><span class="before"></span><a href="#forbedring-av-innhold">Forbedring av Innhold</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1338" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1338"><span class="before"></span><a href="#">Hosting</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1500" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1500"><span class="before"></span><a href="#hosting">Webserver / Webhotell/ E-post</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1340" class="hide-sub menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1340"><span class="before"></span><a href="#">Support</a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1341" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1341"><span class="before"></span><a href="#">Driftsstatus server</a><span class="after"></span>
</li>
<li id="menu-item-1342" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1342"><span class="before"></span><a href="#">Support</a><span class="after"></span>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-1349" class="sub-menu-row inactive only-computer menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1349"><span class="before"></span><a href="#"><span>Kontaktinfo PC</span></a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1344" class="contact inactive menu-item menu-item-type-custom menu-item-object-custom menu-item-1344"><span class="before"></span><a href="#">Kontakt oss:</a><span class="after"></span>
</li>
<li id="menu-item-1345" class="icon-phone menu-item menu-item-type-custom menu-item-object-custom menu-item-1345"><span class="before"></span><a href="tel:+4799988999">+47 999 88 999</a><span class="after"></span>
</li>
<li id="menu-item-1346" class="icon-mail menu-item menu-item-type-custom menu-item-object-custom menu-item-1346"><span class="before"></span><a href="mailto:[email protected]">[email protected]</a><span class="after"></span>
</li>
<li id="menu-item-1347" class="icon-mapmarker menu-item menu-item-type-custom menu-item-object-custom menu-item-1347"><span class="before"></span><a href="#">Company address, 9999 Ziptown</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1528" class="only-computer close-menu-button menu-item menu-item-type-custom menu-item-object-custom menu-item-1528"><span class="before"></span><a href="#"><span>Lukk meny</span></a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><span class="before"></span><a href="#hvem-er-box-media">Hvem er Box Media</a><span class="after"></span>
</li>
<li id="menu-item-1501" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1501"><span class="before"></span><a href="#aktuelt">Aktuelt</a><span class="after"></span>
</li>
<li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><span class="before"></span><a href="#kontakt-oss">Kontakt oss</a><span class="after"></span>
</li>
<li id="menu-item-1527" class="bottom-contact-info only-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1527"><span class="before"></span><a href="#"><span>Kontaktinfo mobil</span></a><span class="after"></span>
<ul class="sub-menu">
<li id="menu-item-1522" class="icon-phone menu-item menu-item-type-custom menu-item-object-custom menu-item-1522"><span class="before"></span><a href="tel:++4799988999">+47 999 88 999</a><span class="after"></span>
</li>
<li id="menu-item-1523" class="icon-mail menu-item menu-item-type-custom menu-item-object-custom menu-item-1523"><span class="before"></span><a href="mailto:[email protected]">[email protected]</a><span class="after"></span>
</li>
</ul>
</li>
<li id="menu-item-1525" class="logo only-mobile menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-36 current_page_item menu-item-1525"><span class="before"></span><a href="#"><span>Hjem</span></a><span class="after"></span>
</li>
</ul>
</div>
</nav>
290
Try explicitly setting the navbar positioning to relative. There seems to be a recurring bug with positioning elements for Safari on iOS.
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
