Bootstrap Navbar Collapse with brand

Question

I have a problem with my navbar. I use Bootstrap 3.3.7.

My navbar needs to collapse at 1200px but it's still not working. When my navbar at 770px collapse then my navbar-brand is not correctly working. The search field went under the button but I want that is all on one line the whole time.

I try a lot and search a lot. (e.g. Bootstrap 3 Navbar Collapse )

Code:

    <div class="container">
<nav class="navbar navbar-default navbar-expand-lg bg-light">
    <div class="container-fluid">
        <span class="navbar-brand" id="navbarbrand" href="#">
                <form class="navbar-form">
                    <button id="addDoku" type="button" class="btn btn-default " data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-plus"></span></button>
        <input type="text" name="search" onkeyup="searchFunction1()" id="search" class="form-control" placeholder="Search">
        </form>
        </span>
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
            <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
            </button>

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#vorlagen">Vorlagen</a></li>
                <li><a href="#allgemein">Allgemein</a></li>
                <li><a href="#netzwerk">Netzwerk</a></li>
                <li><a href="#rma">RMA Support</a></li>
                <li><a href="#honeywell">Honeywell</a></li>
                <li><a href="#vocollect">Vocollect</a></li>
                <li><a href="#voiceman">VoiceMan</a></li>
                <li><a href="#sap">SAP</a></li>
                <li><a href="#sonstige">Sonstige</a></li>
            </ul>
        </div>
    </div>
</nav>

EDIT

This is what I want to avoid both of them:

EDIT

I add my css with this link

<link href="Stylesheet2.css" rel="stylesheet">

But I have some other CSS style in this file. Maybe this is the problem? What I mean is that the @media needs to be in an extra CSS file?

It appears that you're mixing Bootstrap 3 and 4. Bootstrap 4 has no `navbar-expand-lg bg-light` classes — Zim, Feb 22 '18 at 15:12
Okay that is possible, but I think that I didn't use Bootstrap 4 — Chaxal, Feb 22 '18 at 15:19
My own CSS then the Bootstrap stylesheet. Okay, I change it and it works THANKs :). Now it didn't collapse — Chaxal, Feb 22 '18 at 15:28

ahendwh2 · Answer 1 · 2018-02-22T14:32:38.483

1

I found the following rule in Bootstrap:

@media (min-width: 768px){
    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}

Now if the width is under 768px the input field changes to display: block; and width: 100%;. To prevent this you have to add the css without the media rule (or with @media (max-width: 767px)) and you input field will be in one line with the button.

EDIT: A instrution on how to change the navbar breakpoint is written here: https://stackoverflow.com/a/36289507/7409991 I haven't testet it but it seems like you just have to change the max-with on top of the css

edited Feb 22 '18 at 14:32

answered Feb 22 '18 at 13:58

ahendwh2

362
2
10

I try it out. but it changes nothing. But I edit my post maybe it help. – Chaxal Feb 22 '18 at 14:18
Do I need to add something that I can use this **@media**? Because It changes nothing :( – Chaxal Feb 22 '18 at 14:47
It should work with standard css. I created a working example on [jsfiddle](https://jsfiddle.net/ahendwh2/y440uwca/). How to you add the css to your website? – ahendwh2 Feb 22 '18 at 14:53
Ah I see... I did nothing else. I edit my post with CSS. – Chaxal Feb 22 '18 at 14:56
I added the 1200px example on the dup that includes the search form – Zim Feb 22 '18 at 15:55

Bootstrap Navbar Collapse with brand

1 Answers1