I recently created a webpage using Bootstrap 4 beta with a dropdown menu in the navbar. While it displays perfectly on my laptop in fullscreen mode, there seems to be an issue when viewed on my iPhone. The dropdown menu only shows 7 out of the 9 links. Is this a problem with Bootstrap itself or is there a way for me to address this? I've included relevant HTML code here, omitting unrelated sections. Here is a link to the https://i.sstatic.net/vFTcm.png
/* Navbar */
#primary-navbar {
background: #CDEBED;
margin-bottom: 0;
}
/* we overwrite the default navbar style from Bootstrap */
nav.navbar {
background: #CDEBED;
font-size:18px;
border: 0;
border-radius: 0;
margin-bottom: 0;
min-height: 34px;
white-space: nowrap;
}
/* The toggle unit (there is more stuff in there..) */
.navbar-header .navbar-toggle {
border: 0;
}
.navbar-header .navbar-toggle span.icon-bar {
background: #004289;
}
.navbar-header .navbar-toggle:hover span.icon-bar {
background: #004289;
}
/* The Logo/Start Button on mobile devices */
a.navbar-brand:link,
a.navbar-brand:visited {
color: #004289;
text-decoration: none;
background-color: #fff;
border-radius: 50%; padding: .5rem;
}
a.navbar-brand:hover,
a.navbar-brand:focus {
color: #ff0000;
text-decoration: none;
}
/* First Level Main nav */
ul.nav {
/* Menu style */
}
ul.nav li.active {
background: #004289;
text-decoration: none;
}
ul.nav li.active a:link,
ul.nav li.active a:visited {
color: #004289;
text-decoration: none;
}
ul.nav li a:link,
ul.nav li a:visited {
color: #004289;
text-decoration: none;
}
ul.nav li a:hover,
ul.nav li a:focus {
color: #fff;
}
/* Our resposive dropdown */
ul.dropdown-menu {
border-radius: 0;
background: #CDEBED;
width: 100%;
margin: 0;
}
ul.dropdown-menu li a:link,
ul.dropdown-menu li a:visited {
color: #004289;
padding: 5px 15px;
text-decoration: none;
}
ul.dropdown-menu li a:hover,
ul.dropdown-menu li a:focus {
color: #fff;
text-decoration: none;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #CDEBED;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
text-decoration: none;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
@media (min-width:769px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
/* Links */
a {
color: #036;
text-decoration: none;
}
a:hover,
a:focus {
color: #036;
text-decoration: none;
}
.navbar-right li { display: inline-block; }
a {
color: #036;
text-decoration: none;
&:hover {
color: #fff;
text-decoration: none;
}
}
@media (min-width: 992px) {
.equal{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
...
</body>
</html>