bootstrap nav bar collapse issues

Question

The site i am developing is driving me crazy. I got a media query to collapse the navbar but i dont know exactly how to change the button. The collapse also does not display correctly. Tried to change navhar height to compensate and tried using position:relative but no luck.

HTML

And CSS

body{
    padding-top: 0px;
    background-color: black;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0px;
    padding: 0px;
    font-family:"Open Sans";
    height: auto;
}


.carousel .item {
    width: auto;
    max-height: 700px;
    height: auto;
    object-fit: cover;
}
.carousel-inner > .item > img {
    height: none;
    width:  100%;
    overflow:hidden;
}
.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
          transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}

.jumbotron{
    padding-top:100px;
    padding-bottom: 00px;
    overflow: hidden;
}
#nav{
    margin-left: 80px;
}
ul li{
    position:relative;
    top: 25px;
    left: 00px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
}
@media screen and (max-width: 1170px){

    .navbar-header {
        float: none;
    }
    .navbar-brand{
        height:;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid ;
        background-color: black;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
        position: relative;
        top: -10px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-brand > button{
        position: relative;
        top: 10px;
        right: 50px;
    }

}
.navbar-brand > img{
    left: 30px;
    height:100px;
    max-height:100px;
    width:auto;
    position: relative;
    top: -15px;

}

#navbar {
    font-size: 1.3em;
    width: 100%;
    text-transform: uppercase;
    height: 100px;
    background-color: black;
    color: blue;
    margin: 0px;
    overflow: hidden;
}
ul li a{
    color: blue;
}

#navbar .navbar-toggle{
    color: white;
    font-weight: bold;
    border-color: white;
    }

#navbar .navbar-toggle:hover {
    color: #333;
    background-color: #ddd;
}

#navbar .navbar-toggle .glyphicon{
    color:white;
}
#navbar .navbar-toggle:hover .glyphicon{
    color:white;
}

Issue is:

Collapse navbar does not show above the carousel Collapse navbar does not start from the navbar (you can see carousel slide between collapse button and navbar start) Menu button must be 1.2x bigger

Thank you for your help

vanburen · Accepted Answer

This is generally because you specified a height for the navbar which has a default value of min-height: 50px so when under 768px it creates the background for the mobile navigation links. By setting a fixed height it can no longer function as it's meant to. Try using padding to change the height of the nav.

.navbar.navbar-inverse {
  font-size: 1.3em;
  width: 100%;
  text-transform: uppercase;
  padding: 25px 0;
  background-color: black;
  margin-bottom: 0;
}

Working Example:

body {
  background-color: black;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0px;
  padding: 0px;
  font-family: "Open Sans";
  height: auto;
}
.navbar.navbar-inverse {
  font-size: 1.3em;
  width: 100%;
  text-transform: uppercase;
  padding: 25px 0;
  background-color: black;
  margin-bottom: 0;
}
.navbar.navbar-inverse .navbar-toggle {
  color: white;
  font-weight: bold;
  border-color: white;
}
.navbar.navbar-inverse .navbar-toggle:hover {
  color: #333;
  background-color: #ddd;
}
.navbar.navbar-inverse.navbar-toggle .glyphicon {
  color: white;
}
.navbar.navbar-inverse .navbar-toggle:hover .glyphicon {
  color: white;
}
.navbar.navbar-inverse .navbar-nav > li {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 20px;
  color: blue;
}
.navbar.navbar-inverse .navbar-brand {
  padding-top: 0px;
  margin-top: -25px;
}
.navbar.navbar-inverse .navbar-brand > img {
  height: 100px;
  max-height: 100px;
  width: auto;
}
@media screen and (max-width: 1170px) {
  .navbar {
    padding: 25px 0;
  }
  .navbar .navbar-header {
    float: none;
  }
  .navbar .navbar-toggle {
    display: block;
  }
  .navbar .navbar-left,
  .navbar .navbar-right {
    float: none !important;
  }
  .navbar .navbar-collapse {
    border-top: 1px solid;
    background-color: black;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin: 25px 0 -12.5px;
  }
  .navbar .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar .navbar-collapse.collapse.in {
    display: block!important;
  }
  .navbar .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar .navbar-nav > li {
    float: none;
  }
  .navbar .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar.navbar-inverse .navbar-brand {
    padding-top: 1px;
    margin-top: -20px;
  }
}

bootstrap nav bar collapse issues

Answers (2)

Related Questions