[ERLEDIGT] Navigations-Container bleibt sichtbar (Bootstrap)

[Leilalotti]

Hallo,
ich komme irgendwie nicht weiter.
Versuche meine alte Seite auf den neuesten Stand zu bringen und mache das ganze mit Bootstrap. Das Gerüst steht im Großen und Ganzen, alles soll responsive sein.

Bei kleineren Geräten verschwindet die Navigation und zeigt sich oben als Menü, wie gewünscht, allerdings und jetzt kommt es, der blaue Container bleibt trotzdem sichtbar, den man dann als leeren breiten Rahmen sieht.

Zur Veranschaulichung:
http://www.tierforen.net/_sittichede/anschaffung.htm

CSS:

#hornav {
  position: relative;
  width: 100%;
  }

#hornav .container {
  background-color: #336699;
  box-shadow: 0 -4px 0 #33747a inset, 0 0 20px rgba(0, 0, 0, 0.1);
  min-height: 60px;
  display: block;
  }

#hornav .navbar-nav {
  float: none;
}
#hornav .no-padding {
  padding-bottom: 0 !important;
}
#hornav ul#hornavmenu {
  display: inline-block;
  margin: 0 0 -6px;
  padding: 0px;
}
#hornav ul#hornavmenu > li {
  margin: 0px;
}
#hornav ul#hornavmenu > li > a,
#hornav ul#hornavmenu > li > span {
  color: #e3e3e3;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: normal;
  padding: 19px 12px 20px;
  text-transform: uppercase;
  display: block;
}
#hornav ul#hornavmenu > li > a:hover,
#hornav ul#hornavmenu > li > span:hover,
#hornav ul#hornavmenu > li > a.active,
#hornav ul#hornavmenu > li > span.active,
#hornav ul#hornavmenu > li > a.current,
#hornav ul#hornavmenu > li > span.current {
  background: #33747a;
}
#hornav .nav > li > a:hover,
#hornav .nav > li > a:focus {
  background-color: transparent;
}
/* Dropdown Menu */
#hornav ul ul {
  text-align: left;
  background: #f2f2f2;
  border-radius: 5px;
  border: 1px solid #dddddd;
  position: relative;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  display: block;
  list-style: none;
  margin: 0px;
  padding: 5px 0 !important;
  min-width: 200px;
  z-index: 30;
}
#hornav ul ul li {
  min-height: 22px;
  float: none;
  position: relative;
  margin: 0;
}
#hornav ul ul li a,
#hornav ul ul li span {
  background-color: transparent;
  box-shadow: none;
  display: block;
  padding: 6px 15px;
  color: #555555 !important;
  text-transform: none;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
#hornav ul ul:before {
  background: transparent url('../img/menu_arrow.png') no-repeat 0 0;
  content: "";
  display: block;
  height: 10px;
  left: 21px;
  position: absolute;
  top: -10px;
  width: 14px;
}
#hornav ul ul li:first-child a {
  border: none;
}
#hornav ul ul li a:active,
#hornav ul ul li a:focus,
#hornav ul ul li a:hover {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.05);
}
#hornav ul ul li:hover a {
  text-decoration: none;
}
#hornav ul ul ul:before {
  display: none;
}
#hornav li ul,
#hornav li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all 240ms linear;
  -o-transition: all 240ms linear;
  -ms-transition: all 240ms linear;
  -moz-transition: all 240ms linear;
  -webkit-transition: all 240ms linear;
  top: 70px;
  z-index: 1000;
}
#hornav li:hover > ul,
#hornav li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  top: 60px;
}
#hornav li ul li ul {
  left: 220px;
  top: 0;
}
#hornav li ul li:hover > ul {
  top: 0px;
  left: 200px;
}
#hornav ul ul .parent:after {
  top: 10px;
  right: 15px;
  color: #777;
  font-size: 14px;
  content: "\f105";
  position: absolute;
  font-weight: normal;
  display: inline-block;
  font-family: FontAwesome;
}

Den Quelltext der Seite sieht man, wenn man die Seite aufruft.

Was habe ich da falsch gemacht?

 

[scbawik]

Arbeite selten mit Bootstrap aber ein .visible-lg auf den Container sollte den gewünschten Effekt bringen.

 

[Leilalotti]

Hat leider keinen Effekt, der Container ist immer noch sichtbar.

 

[scbawik]

Habe es mir gerade nochmal angesehen, wenn du besagte Klasse auf #hornav-sticky-wrapper anwendest funktioniert es.

 

[Leilalotti]

Ah, jetzt hat es geklappt, ich hatte noch ein hidden-xs im Container gehabt, da wurde mir immer noch der grüne Hintergrund angezeigt, jetzt nur mit visible-lg funktioniert es.

Gut, danke :=