Can't get the navigation bar collapse timing right

Bootstrap Studio Help
1

Hello. I can't get the collapse timing right. It starts like this: Good Image

Then, when I zoom in a little bit, the search bar drops a line and it looks like that:

Bad Situation

And then if I zoom in a bit more, this is what I get: enter image description here

My problem is that I don't want the search bar to drop a line, but instead automatically collapse. this is my code:

   <nav class="navbar navbar-inverse" style="background-color:rgb(17,65,23);font-family:Calibri;font-size:130%">
  <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span></span>
        <span></span>
        <span></span>                        
      </button>
      <a href="Homepage.aspx">
<img src="Pictures/Logo.JPG" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
<li class="MasterPageDefaultHeader"><a href="LogIn.aspx">Log In</a> </li>
      <li class="MasterPageDefaultHeader"><a href="SignUp.aspx">Sign Up</a></li>
      <li class="MasterPageDefaultHeader"><a href="ContactUs.aspx">Contact Us</a></li>
      <li class="MasterPageDefaultHeader"><a href="TabWriter.aspx">Tab Writer</a></li>
      <li class="MasterPageDefaultHeader"><a href="About.aspx">About</a></li>
 </ul>
    <form class="navbar-form navbar-right" method="post" runat="server">
      <div class="input-group" style="padding-top:3px;max-width:200px">
        <input type="text" class="form-control" placeholder="Search Tabs" name="search" size="15">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit" name="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
          </div>
      </div>
  </div></div>
</nav>

Any ideas?

2

Hi,

It seems once its on the MD breakpoint it squashes up when I tried it.

I got around it by setting the breakpoint to LG as shown in this video

3

Ok, based on your provided code, it looks like you manually created this Navbar rather then using the Navbar Component from the Bootstrap app this forum is for.

The code provided has some missing element to it so I am going to provide for you a remake using the apps Navbar using some of your stuff. The main thing is that you can use media queries to adjust things like the max-width you have set for the DIV around the search input. If you move the inline styling to a CSS file you can use media queries to alter that max-width for the screen size you need so that it doesn't put the search input on a separate line.

Here is your working HTML that you can either use or compare to your existing HTML to see what you have missing.

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <*a href="#" class="navbar-brand">
                <img src="Pictures/Logo.JPG" />
            <*/a>
            <button data-toggle="collapse" data-target="#myNavbar" class="navbar-toggle collapsed">
                <*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" id="myNavbar">
            <ul class="nav navbar-nav">
                <li role="presentation" class="MasterPageDefaultHeader"><*a href="LogIn.aspx">Log In<*/a></li>
                <li role="presentation" class="MasterPageDefaultHeader"><*a href="SignUp.aspx">Sign Up<*/a></li>
                <li role="presentation" class="MasterPageDefaultHeader"><*a href="ContactUs.aspx">Contact Us<*/a></li>
                <li role="presentation" class="MasterPageDefaultHeader"><*a href="TabWriter.aspx">Tab Writer<*/a></li>
                <li role="presentation" class="MasterPageDefaultHeader"><*a href="About.aspx">About<*/a></li>
            </ul>
            <*form method="post" class="navbar-form navbar-right" runat="server">
                <div class="input-group">
                    <*input type="text" name="search" placeholder="Search Tabs" class="form-control" size="15" />
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit" name="submit">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </div>
                </div>
            <*/form>
        </div>
    </div>
</nav>

And your working CSS to go with it.

.navbar-brand {
  padding:0 15px;
  height:auto;
}

.navbar.navbar-inverse {
  background-color:rgb(17,65,23);
  background-image:none;
  font-family:Calibri;
  font-size:130%;
}

.navbar-form .input-group {
  max-width:200px;
  padding-top:3px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .navbar-form .input-group {
    max-width:170px;
  }
}

If by chance you are using the app, it's better that you work as much as possible with how the app wants you to work with such as drag/drop and available components rather then brute force with Custom Code on large components. In the end you get a better understanding of the how to code things a little nicer and how to work around things to get them to come out like you want.

The "*" are in the HTML for the sole purpose of the forum not munching the HTML code so you will need to take those out.

Saj

4

Thanks for the video, it helped solve my problem!