CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mark Blank
Mark Blank

Reputation: 13

Bootstrap navbar responsiveness

I'm having a problem with bootstrap navbar. I have 3 links in left and 2 links in the right. I change the min screen width of the navbar to 600px to collapse but the problem is after 768px, the links stop moving/response to the screen change and the two links from the right are no longer visible before the navbar collapse. How can I fix this? Or what should I change in getbootstrap.com/customize/ to allow the navbar to further stick together after 768px. Thanks

Here is my navbar code

    <nav class = "navbar navbar-default navbar-fixed-top">
        <div class = "container">
            <div class = "navbar-header">
                <button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#navbar" aria-expanded = "false" aria-control = "navbar">
                    <span class = "sr-only">Toggle navigation</span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                </button>
                <a class = "navbar-brand" href "/">Project Title</a>
            </div>

            <div class = "collapse navbar-collapse" id = "navbar">
                <ul class = "nav navbar-nav">
                    <li><a href = "#">Link 1</a></li>
                    <li><a href = "#">Link 2</a></li>
                    <li><a href = "#">Link 3</a></li>
                </ul>
                <ul class = "nav navbar-nav navbar-right">
                    <li class = "divider-vertical"></li>
                    <li>
                        <p class = "navbar-btn">
                            <a href = "#" class = "btn btn-default">Login</a>
                        </p>
                    </li>
                    <li>
                        <p class = "navbar-btn">
                            <a href = "#" class = "btn btn-default" role = "button" data-toggle = "modal" data-target = "#modal-sign-up" data-backdrop = "static" data-keyboard = "false">Sign up</a>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

I used the http://getbootstrap.com/customize and change the @screen-sm in Media queries breakpoints to 600px. It the break point works fine but the navbar items is not working. Here is the picture

http://pasteboard.co/1bvNW8aE.png

asyou can see, the sign in button are getting hidden as I adjust the screen width, I want it to keep moving to the left. The end result is before the breakpoint the two buttons in the right are now hidden. How can I make it to move more to the left as I adjust the width? Thanks

Upvotes: 1

Views: 226

Answers (1)

Arpit Goyal
Arpit Goyal

Reputation: 1005

Thanks for editing question, Here's what you want http://jsbin.com/nujime/1/

you either use bootstrap Customize to change

@screen-sm-min and @grid-float-breakpoint variable to your desired value (600 in this case),

@screen-xs-max and @grid-float-breakpoint-max to yourValue - 1 (599 in this case),

and finally @container-sm to yourValue - 40(560 or something else)

or you can always use Bootstrap's Sass/Scss or less files to work with.

Upvotes: 2

Related Questions