0

I made a test page using Bootstrap 4 beta. The navbar has a drop down menu. It works fine in full screen on my laptop but when I view it on my iphone, the drop down shows 7 of the 9 drop down links. Is this a bug in Bootstrap or how can I fix it? here is my html, I left out some of the things that don't relate. Here is a screenshot

/* 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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="John Samonas">

<meta name="robots" content="index, follow">

<title>DriftwoodRentals.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="dist/css/custom-bs4.css" rel="stylesheet">
</head>
<body>
<nav class="navbar fixed-top navbar-custom justify-content-center navbar-expand-md">
<a href="#" class="pull-left navbar-brand">The Driftwood</a>
<button class="navbar-toggler drpbtn" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span style="color:#036">Menu</span> <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
 <ul class="navbar-nav mx-auto">
           <li class="nav-item">
             <a class="nav-link" href="index.html"><i class="fa fa-home" aria-hidden="true"></i>
 Home <span class="sr-only">(current)</span></a></li>
            <li><a class="nav-link" href="photos.html">Photos</a></li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Thing To Do</a>
              <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="http://ryebeachinfo.com/" target="_blank">Rye Beach</a> 
              <a class="dropdown-item" href="https://www.nhstateparks.org/visit/state-parks/jenness-state-beach.aspx" target="_blank">Jenness State Beach</a> 
              <a class="dropdown-item" href="http://www.nhstateparks.com/wallis.html" target="_blank">Wallis Sands Beach</a>
              <a class="dropdown-item" href="http://www.newcastlenh.org/pages/newcastlenh_common/great" target="_blank">Great Island Commons</a> 
              <a class="dropdown-item" href="http://www.nhstateparks.org/visit/state-parks/odiorne-point-state-park.aspx" target="_blank">Odiorn State Park</a>               
             <a class="dropdown-item" href="http://www.nhstateparks.org/visit/state-parks/rye-harbor-state-park.aspx" target="_blank">Rye Harbor State Park</a>  
             <a class="dropdown-item" href="http://www.seacoastsciencecenter.org/" target="_blank">Seacoast Science Center</a>
             <a class="dropdown-item" href="http://www.granitestatewhalewatch.com/" target="_blank">Granite State Whale Watch</a> 
             <a class="dropdown-item" href="http://www.portsmouthharbor.com/" target="_blank">Portsmouth Harbor Cruises</a> 
             </div>
           </li>
            <li><a class="nav-link" href="rates.html">Rates &amp; Booking</a></li>
            <li><a class="nav-link" href="map.html">Map</a></li>  
            <li><a class="nav-link" href="contact.html">Contact</a></li>  
        </ul>
 
        <ul class="navbar-nav">
             <li class="nav-item">
             <a class="nav-link" href="https://www.facebook.com/DriftwoodRentals/" target="_blank">
              <span class="fa-stack">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
   </span>
             </a>
            </li>
             <li class="nav-item">
             <a class="nav-link" href="mailto:Info@DriftwoodRentals.com">
              <span class="fa-stack">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
   </span>
             </a> 
            </li>
            <li class="nav-item">
             <a class="nav-link" href="tel:1-603-501-0465">
              <span class="fa-stack">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-phone fa-stack-1x fa-inverse"></i>
   </span>
             </a>  
             </li>
        </ul>
</div>
</nav>
<header class="masthead">
      <img src="images/Driftwood_Logo.jpg" class="mx-auto d-block img-fluid" alt="Driftwood logo">
</header>     
<!-- /.container -->
<!-- Feature -->
<div class="container"> 
<h1 class="text-center">Welcome to Driftwood Rentals</h1>
<h2 class="text-center">Located on nationally recognized Rye Beach, just steps from Pirate's Coves/Wallis Sands beach and overlooks the majestic marsh.</h2>
<img src="images/Driftwood-aerial.jpg" class="mx-auto d-block img-fluid" alt="Driftwood aerial view">

<p>Welcome to The Driftwood Cottages and Apartments. We are new owners of this seaside vacation spot. Enjoy our charming studios, and one bedroom rustic cottages and two and three bedroom apartments. One minute walk to a pure sandy beach, moments to Portsmouth and all the shopping, whale watches, deep sea fishing, and world class surfing! Our sparkling pool is here for your enjoyment. </p>
<div class="embed-responsive embed-responsive-16by9 center-block">
<iframe width="1920" height="1080" src="https://www.youtube.com/embed/ibkRG1gVtZA?rel=0" allowfullscreen></iframe>
</div>
<p>Our guests can also enjoy our Pool. All cottages have kitchenettes, private bath, screened porch, Cable TV, refrigerator and more!</p>
<p>NO PETS/NO SMOKING ALLOWED!</p>
<p>We are open from May through October</p>

</div>
<div class="clearfix"></div>
<footer class="site-footer">
<p>Copyright &copy; <script>document.write(new Date().getFullYear());</script> The Driftwood</p>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script> 
var $buoop = {vs:{i:10,f:-4,o:-4,s:8,c:-4},unsecure:true,api:4}; 
function $buo_f(){ 
 var e = document.createElement("script"); 
 e.src = "//browser-update.org/update.min.js"; 
 document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}
</script>
</body>
</html>

2
  • your dropdown is simply too big for the screen, so a part of it is just hidden Sep 29 '17 at 16:48
  • Is there a way to have scrollbar or something with the drop down? I really need to have 9 links in the drop down
    – mlegg
    Sep 29 '17 at 16:49
8

Your nav is fixed position and there's nothing constraining the height - this should work!

@media (max-width: 767px){
  nav.navbar{
   max-height: 100vh;
   overflow: auto;
  -webkit-overflow-scrolling: touch;
  }
}
6
  • thanks,that helps in mobile view but in full screen, the drop down doesn't show
    – mlegg
    Sep 29 '17 at 17:01
  • I somehow can't find any media queries at all in your CSS...but it seems that your breakpoint is around 767px. Updated my answer so it doesn't kick in til mobile.
    – will
    Sep 29 '17 at 17:06
  • it's because it's using Bootstrap 4 beta css for that. It's ok, Thanks, I noticed I have .navbar-header .navbar-toggler { border-color: #036; } but I don't see a border around the toggler , did I code that wrong?
    – mlegg
    Sep 29 '17 at 17:34
  • navbar-toggler doesn't have a parent called navbar-header - you should use .navbar .navbar-toggler as the selector
    – will
    Sep 29 '17 at 17:48
  • Thank you!. I've been making websites for 17 yrs and Bootstrap changed a few things I'm still trying to figure out
    – mlegg
    Sep 29 '17 at 17:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.