Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Navbar Not Collapsing Correctly #272

Closed
noquarter76 opened this Issue Nov 6, 2013 · 4 comments

Comments

Projects
None yet
4 participants

I downloaded the latest flat UI with BS 3. (Love it by the was... this is amazing stuff)

I am using the direct example from the components page. The menu there does not collapse at all and instead the buttons simply disappear altogether. You can see this on the flat ui page. (scroll to Menu and then shrink the page and the menu buttons simply hide completely, thus no responsive nav button drop down.)
http://designmodo.github.io/Flat-UI/

I made an adjustment on another fork I found here:
designmodo/Flat-UI#88

But my menu is doing the same thing. (see image)
flatui

Am I missing something?

Here is the code I am using.

    <div class="row">
        <div class="col-md-12">           
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-01">
                       <span class="sr-only">Toggle navigation</span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse navbar-collapse-01">
                      <ul class="nav navbar-nav navbar-left">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li class="dropdown">
                          <a href="#fakelink" class="dropdown-toggle" data-toggle="dropdown">
                            Club/Plan Setup
                            <span class="caret"></span>
                          </a>
                              <ul class="dropdown-menu">
                                <li><a href="#fakelink">Configure Clubs</a></li>
                                <li> <a href="#fakelink">Configure Feature Plans</a></li>
                              </ul> <!-- /Sub menu -->
                        </li>
                        <li class="dropdown">
                             <a href="#fakelink" class="dropdown-toggle" data-toggle="dropdown">
                                Promo Setup
                                <span class="caret"></span>
                              </a>
                              <ul class="dropdown-menu">
                                <li><a href="#fakelink">View Promo List</a></li>
                                <li> <a href="#fakelink">Add Edit Promo</a></li>
                                <li><a href="#fakelink">Promo Details</a></li>
                              </ul> <!-- /Sub menu -->
                        </li>
                        <li class="dropdown">
                             <a href="#fakelink" class="dropdown-toggle" data-toggle="dropdown">
                                Reporting
                                <span class="caret"></span>
                              </a>
                              <ul class="dropdown-menu">
                                <li><a href="#fakelink">Analytics</a></li>
                                <li> <a href="#fakelink">Sales Report</a></li>
                              </ul> <!-- /Sub menu -->
                        </li>
                        <li><a href="#fakelink">Branding</a></li>
                        <li><a href="#fakelink">Sales Customization</a></li>
                        <li><a href="#fakelink">Tools</a></li>
                      </ul>
               </div><!--/.nav -->
               </nav>
        </div>
  </div>

Thanks!

facing the same problem. Really irritating one.

I created a temporary work around that removes the FUI code and replaces it with the out of the box BS menu that is styled like the flat UI.

  1. remove the @import "modules/navbar"; from the flat-ui.less file and replace it with @import "modules/navbar_mynav";
  2. create a new less file in the module folder navbar_mynav
  3. open navbar_mynav in less

CSS

.navbar-inverse {
background-color: @brand-primary !important;
}
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
background-color: @brand-secondary !important;
}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
background-color: @brand-secondary !important;
}
.dropdown-menu {
background-color: @brand-secondary !important;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background-color: @brand-primary !important;
}
.navbar-inverse {
border-color: #080808 !important;
}
.navbar-inverse .navbar-brand {
color: #999999 !important;
}
.navbar-inverse .navbar-brand:hover {
color: @Clouds !important;
}
.navbar-inverse .navbar-nav>li>a {
color: @Clouds !important;
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
color: @Clouds !important;
}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
color: @Clouds !important;
}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
color: @Clouds !important;
}
.dropdown-menu>li>a {
color: @Clouds !important;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: @Clouds !important;}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999 !important;}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: @Clouds !important;}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999 !important;}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: @Clouds !important;}

HTML

           <nav class="navbar navbar-inverse" role="navigation">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                  </div>

                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                      <li class="active"><a href="index.html">Home</a></li>

                      <li class="dropdown">
                        <a href="#fakelink" class="dropdown-toggle" data-toggle="dropdown">
                            Fake Link 1
                            <span class="caret"></span>
                        </a>
                              <ul class="dropdown-menu">
                                <li><a href="#fakelink">Fake link 1 sub 1</a></li>
                                <li> <a href="#fakelink">fake link 1 sub 2</a></li>
                              </ul> <!-- /Sub menu -->
                      </li>

                      <li class="dropdown">
                            <a href="#fakelink" class="dropdown-toggle" data-toggle="dropdown">
                               Fake link 2
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#fakelink">fake link 2 sub 1</a></li>
                                <li> <a href="#fakelink">fake link 2 sub 2</a></li>
                                <li><a href="#fakelink">fake link 2 sub 3</a></li>
                            </ul> <!-- /Sub menu -->
                      </li>


                        <li><a href="#fakelink">fake link 3</a></li>
                        <li><a href="#fakelink">fake link 4</a></li>
                    </ul>
                  </div><!-- /.navbar-collapse -->
            </nav>

Thanks for that, will take it from here.

pytkin commented Dec 18, 2013

Navbar module completely rewritten. Fixed Flat UI Pro will be available in a few days. Thank for your patience.

@pytkin pytkin closed this Dec 18, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment