Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap navbar items not spacing to my adjustments no matter how many I make

I’m trying to make my navbar items responsively space to the end or at least close to it so I’m using media queries and padding to space them but no matter how I increment the padding or what size I increase the increment at, some of my navbar buttons will still drop to the line below which is ultimately what I’m trying to avoid.

Here’s my navbar code followed by my CSS. Site I’m working on is http://staging.kareemhackett.com/home.html I’m working on an all around fix but am not catching any breaks hopefully it’s a small oversight, all help would be greatly appreciated.

<nav class="navbar transparent navbar-static-top" role="navigation">
          <nav class="navbar-inner">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target="#example-nav-collapse">
                  <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 animsition-link" href="home.html"><img class="img-responsive" src="img/Bang_Final50-1.png"></a></div>
        <div class="collapse navbar-collapse text-center" id="example-nav-collapse">
                <ul class="nav navbar-nav">
                  <li><a class="animsition-link" href="about.html">ABOUT</a></li>
                  <li><a class="animsition-link" href="contact.html">CONTACT</a></li>
                  <li><a class="animsition-link" href="services.html">SERVICES</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">STYLISTS</a>
                    <ul class="dropdown-menu" role="menu">
                      <li><a class="text-center animsition-link" href="justin.html">JUSTIN</a></li>
                      <li><a class="text-center animsition-link" href="sarah.html">SARAH</a></li>
                      <li><a class="text-center animsition-link" href="noelia.html">NOELIA</a></li>
                      <li><a class="text-center animsition-link" href="matthew.html">MATTHEW</a></li>
                      <li><a class="text-center animsition-link" href="meaghan.html">MEAGHAN</a></li>
                    </ul>
                  </li>
                  <li><a href="https://instagram.com/bangtoronto/" target="_blank"><i class="fa fa-instagram fa-lg"></i></a></li>
                  <li><a href="https://www.facebook.com/BANGSalonToronto" target="_blank"><span class="fa fa-facebook-official fa-lg"></span></a></li>
                  <li><a href="https://twitter.com/bangsalonto" target="_blank"><i class="fa fa-twitter fa-lg"></i></a></li>
                  <li><a class="btn  btn-xs btn-primary outline" href="https://clients.mindbodyonline.com/classic/ws?studioid=224446&stype=41" target="_blank">BOOK ONLINE</a></li>
                </ul>
              </div>
            </div>
          </nav>
        </nav>

related CSS

@media only screen and (min-width: 3200px){
  .navbar-nav > li{
    padding-left: 3.5%;
    padding-right: 3.5%;
  }
}

@media only screen and (min-width: 2581px) and (max-width: 3199px){
  .navbar-nav > li{
    padding-left: 3%;
    padding-right: 3%;
  }
}

@media only screen and (min-width: 2187px) and (max-width: 2580px){
  .navbar-nav > li{
    padding-left: 2.5%;
    padding-right: 2.5%;
  }
}

@media only screen and (min-width: 1915px) and (max-width: 2186px){
  .navbar-nav > li{
    padding-left: 2%;
    padding-right: 2%;
  }
}

@media only screen and (min-width: 1723px) and (max-width: 1914px){
  .navbar-nav > li{
    padding-left: 1.5%;
    padding-right: 1.5%;
  }
}

@media only screen and (min-width: 1562px) and (max-width: 1722px){
  .navbar-nav > li{
    padding-left: 1%;
    padding-right: 1%;
  }
}

@media only screen and (min-width: 1441px) and (max-width: 1561px){
  .navbar-nav > li{
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}

@media only screen and (min-width: 1355px) and (max-width: 1440px){
  .navbar-nav > li{
    padding-left: 9px;
    padding-right: 9px;
  }
}

body {
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
}
h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  color: #bde4e1;
  text-align: left;
  font-size: 400%;
}
.container {
  padding: 0;
}
.intro {
  background: url(img/headerbg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
}
.home {
  background: url(img/homeheader.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
.about {
  background: url(img/aboutbg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  min-height: 100vh;
  background-size: cover;
  /*  width: 100%;
  height: 100%;*/
}
.contact {
  background: url(img/contactbg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  /*height: 100%;*/
  min-height: 100vh;
  position: absolute;
}
.services {
  background: url(img/servicesbg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  position: absolute;
}
.justin {
  background: url(img/guybg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  position: absolute;
}
.sarah {
  background: url(img/girl1bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: absolute;
}
.noelia {
  background: url(img/girl2bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  position: absolute;
}
.matthew {
  background: url(img/guybg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: absolute;
}
.meaghan {
  background: url(img/girl1bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: absolute;
}
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%;
  /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: middle;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}
/* Padding for spacing */

.inner {
  padding: 30px;
}
.cover {
  padding: 0 20px;
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: bold;
}
@media (min-width: 768px) {
  .site-wrapper-inner {
    vertical-align: middle;
  }
  .cover-container {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .cover-container {
    width: 700px;
  }
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}
.navbar .navbar-collapse {
  text-align: center;
}
.navbar.transparent .navbar-inner .open .dropdown-menu>li>a,
.navbar.transparent .navbar-inner .open .dropdown-menu {
  background-color: #bde4e1;
  color: #5b5e5e;
}
.navbar.transparent .navbar-inner {
  color: #ffffff;
  background: transparent;
}
.navbar.transparent .navbar-inner li a {
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 10pt;
  letter-spacing: 3pt;
}
.navbar.transparent .nav > li > a:focus,
.navbar.transparent .nav > li > a:hover {
  color: #bde4e1;
  text-decoration: none;
  background-color: transparent;
}
.button.navbar-toggle.collapsed:focus,
.button.navbar-toggle.collapsed:hover {
  color: #666666;
}
.navbar.transparent .navbar-brand:hover,
.navbar.transparent .navbar-brand:focus {
  background-color: transparent;
  color: #ffffff;
}
.navbar.transparent .navbar-brand {
  background-color: transparent;
  color: #ffffff;
  font-family: "Tenor Sans";
  font-size: 16pt;
  letter-spacing: 1pt;
}
.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: #bde4e1;
}
@media only screen and (min-width: 3200px) {
  .navbar-nav > li {
    padding-left: 3.5%;
    padding-right: 3.5%;
  }
}
@media only screen and (min-width: 2581px) and (max-width: 3199px) {
  .navbar-nav > li {
    padding-left: 3%;
    padding-right: 3%;
  }
}
@media only screen and (min-width: 2187px) and (max-width: 2580px) {
  .navbar-nav > li {
    padding-left: 2.5%;
    padding-right: 2.5%;
  }
}
@media only screen and (min-width: 1915px) and (max-width: 2186px) {
  .navbar-nav > li {
    padding-left: 2%;
    padding-right: 2%;
  }
}
@media only screen and (min-width: 1723px) and (max-width: 1914px) {
  .navbar-nav > li {
    padding-left: 1.5%;
    padding-right: 1.5%;
  }
}
@media only screen and (min-width: 1562px) and (max-width: 1722px) {
  .navbar-nav > li {
    padding-left: 1%;
    padding-right: 1%;
  }
}
@media only screen and (min-width: 1441px) and (max-width: 1561px) {
  .navbar-nav > li {
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}
@media only screen and (min-width: 1355px) and (max-width: 1440px) {
  .navbar-nav > li {
    padding-left: 9px;
    padding-right: 9px;
  }
}
/*@media only screen and (max-width: 1354px) and (min-width: 1276px){
  .navbar-nav > li{
    padding-left: 5px;
    padding-right: 5px;
  }
}*/

@media (max-width: 1274px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,
  .navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    /*border-top: 1px solid transparent;*/
    box-shadow: none;
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {
    display: block !important;
  }
}
@media only screen and (max-width: 1199px) {
  .navbar-nav > li {
    padding-left: -10px;
    padding-right: -10px;
  }
}
.btn.outline {
  background: none;
  padding: 12px 22px;
}
.btn-primary.outline {
  border: 2px solid white;
  color: white;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open > .dropdown-toggle.btn-primary {
  color: #bde4e1;
  border-color: #bde4e1;
}
.btn-primary.outline:active,
.btn-primary.outline.active {
  border-color: #bde4e1;
  color: #bde4e1;
  box-shadow: none;
}
@media only screen and (max-width: 767px) {
  .selected-box {
    background-color: transparent;
    color: white;
    /*  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);*/
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-size: 150%
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .selected-box {
    background-color: transparent;
    color: white;
    /*  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);*/
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-size: 200%
  }
}
@media only screen and (min-width: 992px) {
  .selected-box {
    background-color: transparent;
    color: white;
    /*  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);*/
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-size: 300%
  }
}
.stylist-box {
  margin-top: 5%;
  background-color: transparent;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  color: white;
  border-top-style: solid;
  border-top-color: white;
  border-top-width: thin;
  border-bottom-style: solid;
  border-bottom-color: white;
  border-bottom-width: thin;
}
.bolded {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: white;
}
.price {
  color: #bde4e1;
}
.portfolio-link a {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: white;
  font-size: 130%;
}
.modal-price-list {
  background-color: #bde4e1;
  opacity: 1;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  color: #5b5e5e;
}
.modal-price-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: #5b5e5e;
}
@media only screen and (min-width: 982px) {
  .modal.custom .modal-dialog {
    width: 28%;
    margin-top: 50% auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 981px) {
  .modal.custom .modal-dialog {
    width: 48%;
    margin-top: 50% auto;
  }
}
.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}
.navbar-nav > li {
  margin-top: 10px;
}
@media only screen and (max-width: 1222px) {
  .navbar-nav>li>a {
    line-height: 5px;
  }
}
@media only screen and (min-width: 1275px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    background-color: #bde4e1;
    color: #5b5e5e;
    min-width: 135px !important;
  }
}
@media only screen and (max-width: 1274px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    background-color: #bde4e1;
    color: #5b5e5e;
    padding: 5px 15px 5px 25px;
  }
}
<!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">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../../favicon.ico">

  <title>Bang Salon | Official Site</title>

  <!-- Icon -->
  <link rel="icon" href="favicon.ico" type="image/x-icon" />

  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="css/font-awesome.min.css">

  <!-- Fonts Used -->
  <link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,400' rel='stylesheet' type='text/css'>

  <!-- Custom styles-->
  <link href="newstyle.css" rel="stylesheet">

  <!-- animsition CSS -->
  <link rel="stylesheet" href="css/animsition.min.css">

  <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
  <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
  <script src="js/ie-emulation-modes-warning.js"></script>

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

  <div class="animsition">
    <div class="home">
      <nav class="navbar transparent navbar-static-top">
        <div class="navbar-inner">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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" href="home.html">
                <img class="img-responsive" src="img/Bang_Final50-1.png">
              </a>
            </div>
            <div id="navbar" class="collapse navbar-collapse text-center">
              <ul class="nav navbar-nav">
                <li><a class="animsition-link" href="about.html">ABOUT</a>
                </li>
                <li><a class="animsition-link" href="contact.html">CONTACT</a>
                </li>
                <li><a class="animsition-link" href="services.html">SERVICES</a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">STYLISTS</a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a class="text-center animsition-link" href="justin.html">JUSTIN</a>
                    </li>
                    <li><a class="text-center animsition-link" href="sarah.html">SARAH</a>
                    </li>
                    <li><a class="text-center animsition-link" href="noelia.html">NOELIA</a>
                    </li>
                    <li><a class="text-center animsition-link" href="matthew.html">MATTHEW</a>
                    </li>
                    <li><a class="text-center animsition-link" href="meaghan.html">MEAGHAN</a>
                    </li>
                  </ul>
                </li>
                <li><a href="https://instagram.com/bangtoronto/" target="_blank"><i class="fa fa-instagram fa-lg"></i></a>
                </li>
                <li><a href="https://www.facebook.com/BANGSalonToronto" target="_blank"><span class="fa fa-facebook-official fa-lg"></span></a>
                </li>
                <li><a href="https://twitter.com/bangsalonto" target="_blank"><i class="fa fa-twitter fa-lg"></i></a>
                </li>
                <li><a class="btn  btn-xs btn-primary outline" href="https://clients.mindbodyonline.com/classic/ws?studioid=224446&stype=41" target="_blank">BOOK ONLINE</a>
                </li>
              </ul>
            </div>
            <!--/.nav-collapse -->
          </div>
        </div>
      </nav>
    </div>
  </div>


  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="js/ie10-viewport-bug-workaround.js"></script>

  <!-- animsition js -->
  <script src="js/jquery.animsition.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

The hidden snippet is the full CSS and HTML which you could see on the site. I looked at bootstrap nav spacing issues before posting but didn’t come across my specific issue unfortunately

Tags:

2

Answers


  1. 0

    Here is one solution that seems to work with your example:
    Change your CSS to match the following.

    @media only screen and (max-width: 1914px) and (min-width: 1715px)
.navbar-nav > li {
  padding-left: 0.5%;
  padding-right: 0.5%;
}

    I am reducing your padding because with a padding of 3% total for each element you end up with 24% of your page being padding, the li items just won’t fit with that. 

    .navbar .navbar-nav {
  vertical-align: top;
  float: right;
  display: block;
}

    Your ul can float right if you want to take up the right side of the page, and make it display block as well.

    Does this work for you?

    Login or Signup to reply.
  2. 0 
      <html>
  <head>
    <title>bug-7</title>
    <style>
    @media only screen and (min-width: 3200px){
    .navbar-nav > li{
    padding-left: 0.5%;
    padding-right: 0.5%;
    }
    }
    @media only screen and (min-width: 2581px) and (max-width: 3199px){
    .navbar-nav > li{
    padding-left: 0.5%;
    padding-right: 0.5%;
    }
    }
    @media only screen and (min-width: 2187px) and (max-width: 2580px){
    .navbar-nav > li{
    padding-left: 0.5%;
    padding-right: 0.5%;
    }
    }
    @media only screen and (min-width: 1915px) and (max-width: 2186px){
    .navbar-nav > li{
    padding-left: 0.5%;
    padding-right: 0.5%;
    }
    }
    @media only screen and (min-width: 1723px) and (max-width: 1914px){
    .navbar-nav > li{
    padding-left: 0.5%;
    padding-right: 0.5%;
    }
    }
    @media only screen and (min-width: 1562px) and (max-width: 1722px){
    .navbar-nav > li{
    padding-left: 0.5%;
    padding-right: 0.5%;
    }
    }
    @media only screen and (min-width: 1441px) and (max-width: 1561px){
    .navbar-nav > li{
    padding-left: 0.5%;
    padding-right: 0.5%;
    }
    }
    @media only screen and (min-width: 1355px) and (max-width: 1440px){
    .navbar-nav > li{
    padding-left: 0.5%;
    padding-right: 0.5%;
    }
    }
    </style>
  </head>
  <body>
    <nav class="navbar transparent navbar-static-top" role="navigation">
      <nav class="navbar-inner">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target="#example-nav-collapse">
            <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 animsition-link" href="home.html"><img class="img-   responsive" src="img/Bang_Final50-1.png"></a></div>
            <div class="collapse navbar-collapse text-center" id="example-nav-  `enter code here`collapse">
              <ul class="nav navbar-nav">
                <li><a class="animsition-link" href="about.html">ABOUT</a></li>
                <li><a class="animsition-link" href="contact.html">CONTACT</a></li>
                <li><a class="animsition-link" href="services.html">SERVICES</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">STYLISTS</a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a class="text-center animsition-link" href="justin.html">JUSTIN</a></li>
                    <li><a class="text-center animsition-link" href="sarah.html">SARAH</a></li>
                    <li><a class="text-center animsition-link" href="noelia.html">NOELIA</a></li>
                    <li><a class="text-center animsition-link" href="matthew.html">MATTHEW</a></li>
                    <li><a class="text-center animsition-link" href="meaghan.html">MEAGHAN</a></li>
                  </ul>
                </li>
                <li><a href="https://instagram.com/bangtoronto/" target="_blank"><i class="fa fa-instagram fa-lg"></i></a></li>
                <li><a href="https://www.facebook.com/BANGSalonToronto" target="_blank"><span class="fa fa-facebook-official fa-lg"></span></a></li>
                <li><a href="https://twitter.com/bangsalonto" target="_blank"><i class="fa fa-twitter fa-lg"></i></a></li>
                <li><a class="btn  btn-xs btn-primary outline" href="https://clients.mindbodyonline.com/classic/ws?studioid=224446&stype=41" target="_blank">BOOK ONLINE</a></li>
              </ul>
            </div>
          </div>
        </nav>
      </nav>
    </body>
  </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search