Expand Bootstrap navbar search box outside collapse menu

Currently, I am working on designing a navigation bar that showcases my brand on the left side, a full-width search bar in the center, and additional pages on the right. I am facing challenges in maintaining the full-width of the search bar without causing the pages on the right to shift to a new row. Furthermore, I am struggling to keep the search bar on the same row in mobile view.

Here is how the layout appears on a smaller screen:

Below is the code snippet for the navbar I am working with, utilizing the default Bootstrap 3 CSS:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="row">
            <span>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">logo</a>
                </div>

                <form class="navbar-form">
                        <div class="form-group" style="display:inline;">
                            <div class="input-group" style="display:table;">
                                <input class="form-control" name="search" placeholder="Search Here" autocomplete="off" type="text">
                                <span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-search"></span></span>
                            </div>
                        </div>
                </form>

            </span>
            <span>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="about.html">About</a></li>
                        <li id="userPage">
                            <a href="#@userpage"><i class="icon-user"></i> My Page</a>
                        </li>
                        <li><a href="#logout" data-prevent="">Logout</a></li>
                    </ul>
                    </ul>
                </div>
            </span>
        </div>
    </div>
</nav>

Feel free to view my code progress on this jsfiddle link.

Any insights or assistance offered would be greatly appreciated!

Answer №1

Here is a simple solution that should work for you:

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


<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>
</nav>

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

Revamp the angular design of the mat-tree UI bottom border line issue

Can you help me with changing the direction of the mat tree from right to left? I need to remove the bottom border, please refer to the image https://i.sstatic.net/ecRIO.png here ...

Transition not influencing the scale property when activating a class

My modal is not scaling in and out properly when I toggle the 'active' class. It either fully scales out or scales in without any transition. Example: const openPopupButtons = document.querySelectorAll('[data-popup-target]'); const ...

If you press Ctrl + F, the browser will disable the form search function

How can I prevent the form find browser functionality when pressing Ctrl+F, and instead focus on the element html? <div id='demo'> <form class="id5-text-find-form" id="id5-text-find-form"> <input class="search" placeho ...

Position the menu links in different alignments - some to the right and others to the

I have created a horizontal menu using HTML and CSS. Currently, the links (boxes) are displayed from left to right, floated to the left of the page. However, I am looking for a way to make one of the links (boxes) float to the right side of the page. I at ...

exploring div element(s) with jQuery

My HTML page contains multiple div elements in the body. I have also included buttons with associated click functions in jQuery to change the background-color of a div element based on the button pressed. However, I'm facing an issue at the 'term ...

How to Implement Dotted Line Styling for Row Data in ReactJS with CSS?

I'm working on a condensed design with Reactjs Monday......................08:00 AM - 21:00 PM I have a lot of dots in the display above. How can I make it shorter without using so many dots? Entering numerous dots like this is not ideal for the webs ...

using the GET method to transfer empty data

I am currently developing a basic search feature using php/sql with a primitive approach. Essentially, I am utilizing the GET method to send the form query across multiple fields in /search.php. This implies that the query will be sent in the following fo ...

Develop an ASCX component to handle various tasks

I am currently in the process of developing a unique custom control that will feature two radio buttons. This project is being carried out using MVC4 and ASP.NET technology. At the moment, I have successfully created two sets of two radio buttons on separa ...

Preserve the video's aspect ratio within a fixed height and width layout by utilizing CSS styling

I am currently in the process of developing a web application with a fixed height layout that does not utilize flexbox and is also limited by width constraints. My goal is to divide the screen in half both vertically and horizontally, around 50% for each ...

Incorporating the parent object into a nested JavaScript function

I have come across similar questions, but my situation seems unique to me. I have simplified my code and turned one line into a comment, but the core concept remains unchanged... function myFunction(options) { var button; options.widgets.forEach(f ...

Adjust the size of an Angular component or directive based on the variable being passed in

I'm looking to customize the size of my spinner when loading data. Is it possible to have predefined sizes for the spinner? For example: <spinner small> would create a 50px x 50px spinner <spinner large> would create a 300px x 300p ...

JQuery Mobile header style vanishing when applied to a page generated dynamically

My second page retrieves data from an Ajax call on the home page, but the header lacks JQuery styling and I suspect a connection between the two. Here is the HTML for the dynamically generated page: <div data-role="page" id="breakdownDialog" data-add-b ...

"In the shadows, the .toLowerCase() method of undefined is failing without making a sound, yet the code

It seems that letting things fail in the background is necessary for this example to work consistently. Is there a way to work around this issue? There are instances where I need to check a div with a data-attribute on certain pages and add a class if it ...

What is the best approach to execute a javascript on an HTML page that is dynamically generated?

Working with jQuery Mobile, I have a situation where I am creating a listView of pages based on events stored in a database. Each event is parsed on my webpage to generate a unique HTML page for each one. Within each page, I include a distinct "subscribe" ...

Change the CSS element if the current URL is not example.com/page1 or example.com/page2

When I apply the following JS code snippets, my output is incorrect or does not display at all. Below are the codes in question: if (location.href != "website.com/page1" || "website.com/page2") { element.style.backgroundColor='none'; ...

Having difficulty retrieving precise HTML information for data scraping purposes

I'm a beginner in python and exploring web scraping for a project on . Currently, I'm using selenium to automate the search for a CUSIP and then extract specific details about it. Although I've successfully automated navigation from EMMA&a ...

Discovering the compiled CSS file in React when using Sass: A step-by-step guide

In my React project, I have incorporated SASS. Now I am looking to find the final compiled CSS file from that SASS code. Whenever I navigate to: While there is the SCSS file visible, where can I locate the CSS version? I am referring to the compiled outp ...

Fixed position of the rotated button placed at a 90-degree angle on the right side of the screen

Recently, I had a project where I had to include a div that was rotated 90 degrees and fixed to the right side of the screen. The challenge was making sure that as you scrolled down, the button moved along with the screen while maintaining responsiveness. ...

Designing materials involves organizing 5 items in a section, as dividing 12 by 5 results in an unattractive

Incorporating the Material Design Light library into my webpage, I have a section with 5 items that I want to evenly occupy the space: <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp social-section"> <a href="http: ...

Sorting rows dynamically with jQuery Tablesorter

I've been struggling to find a solution for my specific issue. I need to have a static row in a large table that will not sort or move, allowing for repeated headers. Can anyone offer assistance with this? $("#dataTable").tablesorter({ ...