New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Restrict collapsed items in Navbar to only those in .nav-collapse, and buttons in Navbar. #2907

Merged
merged 3 commits into from Apr 15, 2012

Conversation

Projects
None yet
3 participants
@tierra
Contributor

tierra commented Apr 2, 2012

Also fix styles for buttons in the Navbar for proper spacing and alignment along with their Navbar-specific dropdown styles.

This is completed work based on issue #2895. There are two distinct parts to this pull request.

First, nav items in the Navbar are now specifically scoped so that only items contained in .nav-collapse are actually collapsed in < 980px screens rather than all nav items (including all dropdown types). This change was required to implement the second part of this feature.

The second part adds appropriate Navbar-specific styles to buttons (including dropdown buttons) so that they can be used in the Navbar. There is one caveat to this feature though.

  • Unfortunately anchor buttons could not be supported (only input.btn, button.btn and .btn-group is supported). The Navbar contains numerous customized anchor styles that override the base button styles effectively killing anchor buttons in the Navbar. Hopefully someone else can figure out a clean fix for this in the future.

I have modified the fluid.html example to use a button dropdown in place of the navbar-text to illustrate a useful account dropdown that remains shown in responsive designs even on mobile screens.

For whoever is reviewing these changes, I should also explain that the extra li.dropdown scope added to dropdown styles were only to styles meant specifically for .nav dropdowns, but not button dropdowns (mostly dealing with the appearance of the caret). The added scope makes it possible to add button dropdowns either outside or inside of a .nav item without any issues or differences, which might be desired depending on the Navbar layout.

@babrewer

This comment has been minimized.

Show comment
Hide comment
@babrewer

babrewer Apr 10, 2012

Sorry for the newbie question, but how do I test my bootstrap apps with these changes?

Sorry for the newbie question, but how do I test my bootstrap apps with these changes?

@tierra

This comment has been minimized.

Show comment
Hide comment
@tierra

tierra Apr 10, 2012

Contributor

@babrewer

Probably the easiest way would be downloading the "raw" copy of the bootstrap.zip file in this pull request. This contains the pre-built Bootstrap CSS files with the changes being discussed here, so you can switch out your application's copy of the bootstrap.css and bootstrap-responsive.css files with these to test it with your app.

If your application uses the Bootstrap LESS files directly, you might need to replace out those files instead so any LESS variables are still applied to your custom CSS appropriately.

Contributor

tierra commented Apr 10, 2012

@babrewer

Probably the easiest way would be downloading the "raw" copy of the bootstrap.zip file in this pull request. This contains the pre-built Bootstrap CSS files with the changes being discussed here, so you can switch out your application's copy of the bootstrap.css and bootstrap-responsive.css files with these to test it with your app.

If your application uses the Bootstrap LESS files directly, you might need to replace out those files instead so any LESS variables are still applied to your custom CSS appropriately.

@babrewer

This comment has been minimized.

Show comment
Hide comment
@babrewer

babrewer Apr 10, 2012

Thank-you very much. I appreciate the reply and assistance.

Brian

On Apr 10, 2012, at 9:11 AM, Bryan Petty wrote:

@babrewer

The easiest way would be downloading the "raw" copy of the bootstrap.zip file in this pull request. This contains the pre-built Bootstrap CSS files with the changes being discussed here, so you can switch out your application's copy of the bootstrap.css and bootstrap-responsive.css files with these to test it with your app.


Reply to this email directly or view it on GitHub:
#2907 (comment)

Thank-you very much. I appreciate the reply and assistance.

Brian

On Apr 10, 2012, at 9:11 AM, Bryan Petty wrote:

@babrewer

The easiest way would be downloading the "raw" copy of the bootstrap.zip file in this pull request. This contains the pre-built Bootstrap CSS files with the changes being discussed here, so you can switch out your application's copy of the bootstrap.css and bootstrap-responsive.css files with these to test it with your app.


Reply to this email directly or view it on GitHub:
#2907 (comment)

@babrewer

This comment has been minimized.

Show comment
Hide comment
@babrewer

babrewer Apr 10, 2012

Trying to use a btn-group dropdown in the navbar for mobile navigation. Works great in testing, doesn't create tabbed menu items as with the production release. Only nit, there is gap between the button and the drop down caret http://fdij.businesscatalyst.com/img/splitmenu.jpg Thanks for making the changes to the navbar, this is exactly what I've been trying to accomplish.

Trying to use a btn-group dropdown in the navbar for mobile navigation. Works great in testing, doesn't create tabbed menu items as with the production release. Only nit, there is gap between the button and the drop down caret http://fdij.businesscatalyst.com/img/splitmenu.jpg Thanks for making the changes to the navbar, this is exactly what I've been trying to accomplish.

@tierra

This comment has been minimized.

Show comment
Hide comment
@tierra

tierra Apr 10, 2012

Contributor

I didn't really test these changes on an actual mobile phone yet, but can you post the HTML code that did this? Also what browser (phone) did you see this in? I've noticed that sometimes extra whitespace between HTML tags can cause this with some Bootstrap components.

Contributor

tierra commented Apr 10, 2012

I didn't really test these changes on an actual mobile phone yet, but can you post the HTML code that did this? Also what browser (phone) did you see this in? I've noticed that sometimes extra whitespace between HTML tags can cause this with some Bootstrap components.

@babrewer

This comment has been minimized.

Show comment
Hide comment
@babrewer

babrewer Apr 10, 2012

Test device was an iPhone 4. html as follows:

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">


                <span class="pull-right vertical-center hidden-phone"><a href="/secure/account.html">My Account | </a>
                <a href="/secure/register.html">Sign Up | </a>
                <a href="/secure/login.html">Login | </a>{module_whosloggedin} </a></span>

                <div class="btn-group dropdown pull-right visible-phone">
        <button class="btn">Menu</button>
              <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
              <li class=""><a href="http://fdij.businesscatalyst.com/html/home.html">Home</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/about.html">About</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/custom.html">Custom Jewelry</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/designer.html">Designer</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/customgallery.html">Custom Jewelry Gallery</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/designergallery.html">Designer Jewelry Gallery</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/faq.html">FAQ's</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/buzz.html">Latest Buzz!</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/contact.html">Conatct Us</a></li>
              </ul>
      </div>


            </div>
        </div>
    </div>

On Apr 10, 2012, at 1:56 PM, Bryan Petty wrote:

I didn't really test these changes on an actual mobile phone yet, but can you post the HTML code that did this? Also what browser (phone) did you see this in?


Reply to this email directly or view it on GitHub:
#2907 (comment)

Test device was an iPhone 4. html as follows:

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">


                <span class="pull-right vertical-center hidden-phone"><a href="/secure/account.html">My Account | </a>
                <a href="/secure/register.html">Sign Up | </a>
                <a href="/secure/login.html">Login | </a>{module_whosloggedin} </a></span>

                <div class="btn-group dropdown pull-right visible-phone">
        <button class="btn">Menu</button>
              <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
              <li class=""><a href="http://fdij.businesscatalyst.com/html/home.html">Home</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/about.html">About</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/custom.html">Custom Jewelry</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/designer.html">Designer</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/customgallery.html">Custom Jewelry Gallery</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/designergallery.html">Designer Jewelry Gallery</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/faq.html">FAQ's</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/buzz.html">Latest Buzz!</a></li>
                <li class=""><a href="http://fdij.businesscatalyst.com/html/contact.html">Conatct Us</a></li>
              </ul>
      </div>


            </div>
        </div>
    </div>

On Apr 10, 2012, at 1:56 PM, Bryan Petty wrote:

I didn't really test these changes on an actual mobile phone yet, but can you post the HTML code that did this? Also what browser (phone) did you see this in?


Reply to this email directly or view it on GitHub:
#2907 (comment)

@tierra

This comment has been minimized.

Show comment
Hide comment
@tierra

tierra Apr 10, 2012

Contributor

@babrewer Sorry, I do see what's wrong here. I made an oversight with button margins that actually affects all browsers (not just mobile). I'll have a fix up shortly here.

Contributor

tierra commented Apr 10, 2012

@babrewer Sorry, I do see what's wrong here. I made an oversight with button margins that actually affects all browsers (not just mobile). I'll have a fix up shortly here.

@mdo mdo merged commit 5b85ed1 into twbs:2.0.3-wip Apr 15, 2012

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