Display the search bar under the navigation using Bootstrap

When the menu is collapsed at 1200 width, I am trying to display navigation underneath it. However, in this state, the search bar appears on the right side even when the menu has collapsed.

Additionally, using a div to separate both sections of navigation causes an issue with the mega menu style as the width of the dropdown is limited to col-md-9. It would be preferable for it to extend till the end, which is the full width of the navigation.

<nav class="navbar navbar-default" role="navigation">
<div class="row">
    <div class="col-sm-9 col-md-9">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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="#">Company Name</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-sm-3 col-md-3 pull-right">
    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="q">
            <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
    </form>
    </div>
</div>

@media (max-width: 1200px) {
.navbar-header {
    float: none;
    height: 80px!important;
}
.navbar-left,.navbar-right {
    float: none !important;
}
.navbar-toggle {
    margin-top: 20px;
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin-top: 7.5px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.collapse.in{
    display:block !important;
}


.navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
    .navbar-nav > li > a {
            line-height: 20px!important;
        padding-top: 10px!important;
            padding-bottom: 10px!important;
    }
    .navbar-brand>img { 
      position:absolute!important;
      left: -50px!important;
      top: 0px!important;
      padding: 0px!important;
    }

JS Fiddle Link

Answer №1

To ensure proper display at larger resolutions (>1200), use container-fluid instead of row. This will allow the nav and search bar to be on the same row.

For this layout, apply col-lg-9 to navbar-header and col-lg-3 to navbar-form.

https://i.sstatic.net/2kLZQ.png

If the resolution is less than 1200, they should be placed in different rows.

Update: Include the following CSS for better styling:

@media (min-width: 768px){
    .input-group-btn{
    width: 1% !important;
    }
    }

Here's the updated jsfiddle link for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching row visibility based on condition failure is malfunctioning

Having trouble toggling a specific table row based on a condition that is not working as expected. If the status is 'none', I want to open a form in a popup, but if the status is 'done', the popup should not open. <ng-container *ngF ...

Checking for the presence of text within a span tag - a simple guide

see fiddle if there is an already allotted time slot for the patient, change its color to yellow using jquery on the client side. In my example, if I assign a time slot for the first time, it turns green and when assigning another one, the previous slot tu ...

javascript - determine whether a hyperlink has been accessed

Is there a method to determine if a link has been visited? In Firefox, the color of a link changes after clicking on it, which leads me to believe it is possible. Edit: This question pertains to a Firefox extension, so I am unable to modify the HTML or CS ...

Improving Storage of Message Data in MySQL with PHP

I'm in the process of developing a website featuring a messaging system for users. To store the necessary data, I am utilizing MySQL. The structure of the inbox table is outlined below: `mid` INT UNSIGNED NOT NULL AUTO_INCREMENT , `to_uid` INT UN ...

An ajax call triggers a 500 error response when initiated within another ajax call

I am encountering an issue with my Ajax requests. There are two requests - one (referred to as Ajax#1) sends data to the backend, and the other (Ajax#2) uses that data to load content onto the front end. To ensure that Ajax#2 runs after Ajax#1, I attempt ...

Using the ternary operator in React to implement inline styles

Within my React/Typescript project, I aim to dynamically exhibit a color based on the presence or absence of a value in payload[1]. In the code snippet below, note the usage of an inline style tag. <li className="recharts-tooltip-item" style={ ...

The issue with HTML5 anchor download attribute for saving files cannot be resolved

When I use an anchor tag like this.. <a class="btn btn-download" href="https://www.anotherdomain.com/file.jpg" download="customname.jpg">Download</a> The file is downloaded as file.jpg instead of customname.jpg Interestingly, it works fine i ...

Turn off automatic calling of Javascript function via the menu

Can anyone help me with calling a JS function from an action link? Here's my declaration: <li><a href="javascript:myFunc()"><span class="glyphicon glyphicon-ok"></span>&nbsp;Test</a></li> The issue is that the ...

Use Bootstrap 4.3.1 to seamlessly weave text around a video on your website

I've been grappling with this, but I just can't seem to crack it. <div class="container-fluid"> <div class="row"> <div class="col-lg-4 order-1 mb-auto mt-auto"> & ...

menu fails to expand when clicked in mobile view

Could someone please help me troubleshoot why the menu icon is not expanding in mobile view? I'm not sure what I did wrong. Here is the link for reference: Snippet of HTML: <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> ...

Combining Laravel and JQuery to Populate a Textbox with the Value Selected from a Dropdown Field

How can I accomplish this desired outcome? https://i.sstatic.net/qbsjO.png I am looking to implement a dynamic dropdown functionality where selecting a value from the dropdown will automatically populate a textbox with the corresponding aircraft_id from ...

Determine the current position of the cursor within a contenteditable division

I came across this code snippet on a forum to determine the cursor position in a contenteditable div, but unfortunately it consistently returns 0. Here is the function responsible for retrieving the cursor position: new function($) { $.fn.getCursorPo ...

Can JSS support creating variables similar to Sass?

Currently, I am developing a project in React and utilizing Material-ui with JSS for styling. In Sass, we have the ability to define variables like $color: rgb(255, 255, 255) for later use. I am curious if it is possible to implement variable usage simi ...

What is the best way to dynamically select and deselect radio buttons based on a list of values provided by the controller?

I am currently working on implementing an edit functionality. When the user initially selects a list of radio buttons during the create process, I store them in a table as a CSV string. Now, during the edit functionality, I retrieve this list as a CSV stri ...

What is the best way to remove headers and footers programmatically in print pages on Safari using JavaScript?

Struggling with eliminating the header and footer on print pages in Safari using JavaScript? While disabling the header and footer manually can be done through print settings in most browsers, my aim is to automate this process with code to ensure that use ...

Invoke a method using href

Here's the script I'm working with: $('<a class="page_link" href="javascript:'+getResults('http://192.168.1.122:10039/wps/mycontenthandler/vamshi/!ut/p/digest!SqaCnIAqyulFhaUStKGgJQ/searchfeed/search?query=*&scope=14401723 ...

Retrieve specific nested array values in Handlebars based on an index's value

While I understand that this question may have been asked previously, my query pertains to obtaining data in a specific pattern since I am relatively new to Handlebars. Currently, I have some JSON data structured as follows: "value": [ { ...

Differences in Loading Gif Visualization Across Chrome, Safari, and Firefox

Having an issue with a loading image in Chrome, while it displays correctly in Safari and Firefox. In Chrome, I see two half-loading images instead of one whole image. Struggling to find a solution for this problem, any assistance would be greatly apprecia ...

Incorporate negative padding in order to smoothly scroll to a specific ID

When I jump to an ID using domain.com/#section, the scroll goes too far down and needs a negative margin added. Is there a way to achieve this directly in the URL without relying on CSS, jQuery, or JavaScript? ...

How can I access the javascript player using a URL code?

Can someone recommend a universal video player that can play videos from any URL, including YouTube and Vimeo? Thank you in advance! ...