Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Collapsed navigation for all screen sizes in Bootstrap 3

    • 0
    • 1
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 1.02k
    Comment on it

    Hi there.

    Navigation bars have become really easy to work with in Bootstrap 3.

    Since Bootstrap 3 is mobile first, the navigation bar remains in place for a certain screen size, collapses at a certain screen size and a grid like button appears.

    This working is expected.

    But that may not be required by all and in all websites.

    So, what I want is the navigation bar to remain collapsed at all screen sizes. That is, the action performed after reaching a certain screen size should be the action performed at all screen sizes.

    Even for a desktop, I want the navigation to remain collapsed and the grid like button to be visible at all times.

    This can be achieved in many ways. Some might try changing the media queries but that would be really tedious and time taking. I found a solution that is easy and also does not take much of your time.

    Just override the default Bootstrap CSS with the one I am providing below.

     

        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            margin: 7.5px -15px;
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }

    This worked well for me. Hope it does for you too. :)

     

    Keep Coding!

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: