• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Navigation won't collapse to "sandwich"

Explorer ,
Oct 05, 2015 Oct 05, 2015

Copy link to clipboard

Copied

Hi you savers of lost coding souls:

I am still coding my site, and the navigation won't collapse into a "sandwich" when I reduce the screen size. It used to, and then just stopped. I fubar'ed something somewhere.

You can see the page at Kairos Prison Ministry.

The pertinent css is:

body {

  font-family: Calibri;

}

#wrapper {

  padding-left: 0px;

  padding-right: 0px;

}

#nav {

  text-align: center;

}

header {

  width: 100%;

  background-color:#fff;

}

#navbar {

  border-radius: 0px;

  border: 0px;

  margin-bottom: 0px;

  background-color: #3458B8;

}

.dropdown-menu li {

  float: left;

  width: 100%;

  margin: 0;

  padding: 0;

  border-bottom: 0px;

}

.bg-primary {

  background-color: #3458B8;

}

.navbar-default {

  -webkit-box-shadow: inset 0px 0px;

  box-shadow: 0px 0px;

  border-width: 0px;

  border-color: #3458B8;

  background-color: #3458B8;

  border-radius: 0px;

  border: 0px;

}

.navbar-nav {

  border-radius: 0px;

  border: 0px;

  color: #3458B8;

  width: 100%;

    text-align: center;

}

.navbar-nav li {

  float: none;

  display: inline-block;

  color:#fff;

    }

.navbar-default .navbar-nav > li > a {

  color:#fff;

}

.blue {

  background: #bdd0e8;

  color: #3458B8

}

.dkblue {

  background: #3458B8;

  color: #3458B8;

  width:100%;

}

nav nav-pills nav-stacked ul li active {

  background: #3458B8;

}

.centered-pills {

    text-align: center;

    background: #3458B8;

}

.centered-pills ul.nav-pills {

  display: inline-block;

}

.centered-pills li {

  display: inline;

}

/**change stacked nav on md-lg displays**/

@media (min-width: 600px) {

.nav-stacked > li {

display: inline-block;

}

.nav-stacked > li + li {

    margin-top: 0;

    margin-left: 2px;

}

}

Views

574

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 05, 2015 Oct 05, 2015

Copy link to clipboard

Copied

LATEST

Well your drop-menus work just fine when you click on them.  If you want the nav-pills to stack and collapse into a hamburger menu, you must add the necessary Bootstrap hooks (classes) for it to work that way.

Right now, you don't any of the necessary equipment in your nav-pills code.

See this link from Stackoverflow:

html - makes nav-pills collapsable just like nav-bar in bootstrap - Stack Overflow

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines