Bootstrap collapsed navbar toggle not working

The toggle button appears when window is resized small enough but when pressed the button does nothing. I checked over the html several times and made sure the bootstrap files uploaded properly but still to no avail.

Also is there a way to change the parent breakpoint for the toggle button to appear as navbar links squash up relatively quickly as they are so large.

@charset "UTF-8";



.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}

<html>

<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar"></div>

      <div class="collapse navbar-collapse">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>

</html>

Am pretty new to coding html so please help me :)

edited Jan 3 at 16:05

Praveen Kumar Purushothaman

135k23140188

asked Jan 3 at 14:42

Jared Santoro

163

It definitely works, you see a small jerk. It's just overflow: hidden

– Praveen Kumar Purushothaman
Jan 3 at 14:45

You are loading a main.css file, what is it exactly?

– Armel
Jan 3 at 14:45

You are targeting #myNavbar which is an empty div and is not wrapping anything.

– Ana Liza Pandac
Jan 3 at 14:46

add a comment |

Also is there a way to change the parent breakpoint for the toggle button to appear as navbar links squash up relatively quickly as they are so large.

@charset "UTF-8";



.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}

<html>

<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar"></div>

      <div class="collapse navbar-collapse">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>

</html>

Am pretty new to coding html so please help me :)

edited Jan 3 at 16:05

Praveen Kumar Purushothaman

135k23140188

asked Jan 3 at 14:42

Jared Santoro

163

It definitely works, you see a small jerk. It's just overflow: hidden

– Praveen Kumar Purushothaman
Jan 3 at 14:45

You are loading a main.css file, what is it exactly?

– Armel
Jan 3 at 14:45

You are targeting #myNavbar which is an empty div and is not wrapping anything.

– Ana Liza Pandac
Jan 3 at 14:46

add a comment |

Also is there a way to change the parent breakpoint for the toggle button to appear as navbar links squash up relatively quickly as they are so large.

@charset "UTF-8";



.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}

<html>

<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar"></div>

      <div class="collapse navbar-collapse">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>

</html>

Am pretty new to coding html so please help me :)

edited Jan 3 at 16:05

Praveen Kumar Purushothaman

135k23140188

asked Jan 3 at 14:42

Jared Santoro

163

Also is there a way to change the parent breakpoint for the toggle button to appear as navbar links squash up relatively quickly as they are so large.

@charset "UTF-8";



.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}

<html>

<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar"></div>

      <div class="collapse navbar-collapse">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>

</html>

Am pretty new to coding html so please help me :)

@charset "UTF-8";



.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}

<html>

<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar"></div>

      <div class="collapse navbar-collapse">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>

</html>

@charset "UTF-8";



.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}

<html>

<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar"></div>

      <div class="collapse navbar-collapse">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>

</html>

jquery html css twitter-bootstrap twitter-bootstrap-3

edited Jan 3 at 16:05

Praveen Kumar Purushothaman

135k23140188

asked Jan 3 at 14:42

Jared Santoro

163

edited Jan 3 at 16:05

Praveen Kumar Purushothaman

135k23140188

asked Jan 3 at 14:42

Jared Santoro

163

edited Jan 3 at 16:05

Praveen Kumar Purushothaman

135k23140188

edited Jan 3 at 16:05

Praveen Kumar Purushothaman

135k23140188

edited Jan 3 at 16:05

Praveen Kumar Purushothaman

135k23140188

asked Jan 3 at 14:42

Jared Santoro

163

asked Jan 3 at 14:42

Jared Santoro

163

asked Jan 3 at 14:42

Jared Santoro

163

It definitely works, you see a small jerk. It's just overflow: hidden

– Praveen Kumar Purushothaman
Jan 3 at 14:45

You are loading a main.css file, what is it exactly?

– Armel
Jan 3 at 14:45

You are targeting #myNavbar which is an empty div and is not wrapping anything.

– Ana Liza Pandac
Jan 3 at 14:46

add a comment |

It definitely works, you see a small jerk. It's just overflow: hidden

– Praveen Kumar Purushothaman
Jan 3 at 14:45

You are loading a main.css file, what is it exactly?

– Armel
Jan 3 at 14:45

You are targeting #myNavbar which is an empty div and is not wrapping anything.

– Ana Liza Pandac
Jan 3 at 14:46

It definitely works, you see a small jerk. It's just overflow: hidden

– Praveen Kumar Purushothaman
Jan 3 at 14:45

You are loading a main.css file, what is it exactly?

– Armel
Jan 3 at 14:45

You are targeting #myNavbar which is an empty div and is not wrapping anything.

– Ana Liza Pandac
Jan 3 at 14:46

add a comment |

1 Answer
1

active

oldest

votes

You have added navbar-collapse twice, the main one being an empty <div>. Replace the following:

<div class="collapse navbar-collapse" id="myNavbar"></div>

<div class="collapse navbar-collapse">

With the following:

<div class="collapse navbar-collapse" id="myNavbar">

Remove once and you get this working:

@charset "UTF-8";

.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}



@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    color: #fff;

    transform: none;

    font-size: 1em;

  }

}

<html>



<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>



<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>



</html>

For your second issue:

.navbar-nav.navbar-center {

  position: absolute;

}

Remove this in the media query for smaller devices and remove the transform too.

@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    transform: none;

    font-size: 1em;

  }

}

Preview

preview

edited Jan 3 at 14:59

answered Jan 3 at 14:48

Praveen Kumar Purushothaman

135k23140188

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024503%2fbootstrap-collapsed-navbar-toggle-not-working%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You have added navbar-collapse twice, the main one being an empty <div>. Replace the following:

<div class="collapse navbar-collapse" id="myNavbar"></div>

<div class="collapse navbar-collapse">

With the following:

<div class="collapse navbar-collapse" id="myNavbar">

Remove once and you get this working:

@charset "UTF-8";

.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}



@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    color: #fff;

    transform: none;

    font-size: 1em;

  }

}

<html>



<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>



<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>



</html>

For your second issue:

.navbar-nav.navbar-center {

  position: absolute;

}

Remove this in the media query for smaller devices and remove the transform too.

@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    transform: none;

    font-size: 1em;

  }

}

Preview

preview

edited Jan 3 at 14:59

answered Jan 3 at 14:48

Praveen Kumar Purushothaman

135k23140188

add a comment |

You have added navbar-collapse twice, the main one being an empty <div>. Replace the following:

<div class="collapse navbar-collapse" id="myNavbar"></div>

<div class="collapse navbar-collapse">

With the following:

<div class="collapse navbar-collapse" id="myNavbar">

Remove once and you get this working:

@charset "UTF-8";

.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}



@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    color: #fff;

    transform: none;

    font-size: 1em;

  }

}

<html>



<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>



<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>



</html>

For your second issue:

.navbar-nav.navbar-center {

  position: absolute;

}

Remove this in the media query for smaller devices and remove the transform too.

@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    transform: none;

    font-size: 1em;

  }

}

Preview

preview

edited Jan 3 at 14:59

answered Jan 3 at 14:48

Praveen Kumar Purushothaman

135k23140188

add a comment |

You have added navbar-collapse twice, the main one being an empty <div>. Replace the following:

<div class="collapse navbar-collapse" id="myNavbar"></div>

<div class="collapse navbar-collapse">

With the following:

<div class="collapse navbar-collapse" id="myNavbar">

Remove once and you get this working:

@charset "UTF-8";

.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}



@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    color: #fff;

    transform: none;

    font-size: 1em;

  }

}

<html>



<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>



<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>



</html>

For your second issue:

.navbar-nav.navbar-center {

  position: absolute;

}

Remove this in the media query for smaller devices and remove the transform too.

@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    transform: none;

    font-size: 1em;

  }

}

Preview

preview

edited Jan 3 at 14:59

answered Jan 3 at 14:48

Praveen Kumar Purushothaman

135k23140188

You have added navbar-collapse twice, the main one being an empty <div>. Replace the following:

<div class="collapse navbar-collapse" id="myNavbar"></div>

<div class="collapse navbar-collapse">

With the following:

<div class="collapse navbar-collapse" id="myNavbar">

Remove once and you get this working:

@charset "UTF-8";

.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}



@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    color: #fff;

    transform: none;

    font-size: 1em;

  }

}

<html>



<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>



<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>



</html>

For your second issue:

.navbar-nav.navbar-center {

  position: absolute;

}

Remove this in the media query for smaller devices and remove the transform too.

@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    transform: none;

    font-size: 1em;

  }

}

Preview

preview

@charset "UTF-8";

.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}



@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    color: #fff;

    transform: none;

    font-size: 1em;

  }

}

<html>



<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>



<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>



</html>

@charset "UTF-8";

.navbar-nav.navbar-center {

  position: absolute;

  left: 50%;

  transform: translatex(-50%);

  font-size: 1.5vmin;

  font-family: 'brandon grotesque'

}



.button {

  display: inline-block;

  border: solid white 2px;

  margin-top: 25px;

  -moz-transition: color .5s ease-in;

  -o-transition: color .5s ease-in;

  -webkit-transition: color .5s ease-in;

  background-color: transparent;

  color: white;

  text-decoration: none;

  padding: 2px;

}



.button:hover {

  background-color: white;

  color: black;

  text-decoration: none;

  transition-timing-function: ease-in-out;

}



#logo {

  height: 50px;

}



.navbar {

  min-height: 80px;

}



.navbar-toggle {

  /* (80px - button height 34px) / 2 = 23px */

  margin-top: 23px;

  padding: 9px 10px !important;

}



@media (min-width: 768px) {

  .navbar-nav>li>a {

    /* (80px - line-height of 27px) / 2 = 26.5px */

    padding-top: 26.5px;

    padding-bottom: 26.5px;

    line-height: 27px;

  }

}



@media screen and (max-width: 767px) {

  .navbar-nav.navbar-center {

    position: static;

    color: #fff;

    transform: none;

    font-size: 1em;

  }

}

<html>



<head>

  <title>MASSERIA ELYSIUM</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>



<body>

  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

        </button>

      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-center">

          <li class="active"><a href="#">HOME</a></li>

          <li><a href="#">DINING</a></li>

          <li><a href="#">LOCATION</a></li>

          <li><a href="#">ACCOMODATION</a></li>

          <li><a href="#">SERVICES</a></li>

          <li><a href="#">GALLERY</a></li>

          <li><a href="#">CONTACT</a></li>

          <a class="button" href="#">BOOK NOW</a>

        </ul>

      </div>

    </div>

  </nav>

</body>



</html>

edited Jan 3 at 14:59

answered Jan 3 at 14:48

Praveen Kumar Purushothaman

135k23140188

edited Jan 3 at 14:59

answered Jan 3 at 14:48

Praveen Kumar Purushothaman

135k23140188

answered Jan 3 at 14:48

Praveen Kumar Purushothaman

135k23140188

answered Jan 3 at 14:48

Praveen Kumar Purushothaman

135k23140188

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk