Center the search box in responsive mode

Question

Center the search box in responsive mode

I am utilizing a bootstrap navigation bar as shown in this source. My aim is to ensure that on mobile devices, users do not have to click on the menu icon to search on the page. I want to display the search box immediately after the Brand in responsive mode.

In a normal desktop browser, Bootstrap appears like this:

https://i.sstatic.net/dqKlJ.png

However, in responsive mode it looks like this:

https://i.sstatic.net/Du6qM.png

I need to reposition the search box and login option to be centered after the Brand on mobile devices. I attempted adjusting the CSS to move the search box out of the navigation bar, but it ended up affecting my entire HTML structure.

Can someone provide guidance on how to achieve this? Here is the

[JSFiddle Link][4] - https://jsfiddle.net/mzy1sak3/1/

html css responsive-design navbar

Answer 1

Answer №1

When the toggle button on the navigation bar is clicked in a mobile device, the collapsible menu will appear. The default navigation bar includes a search option that cannot be changed without altering the bootstrap default behavior. However, there is a workaround available. You can hide it by adding an additional class called "hidden-xs" and then insert another div with the class "visible-xs" to place the form specifically for mobile devices.

Below is a sample HTML structure:

<!-- Navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <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="#">Title</a>

                <div class="visible-xs">
                    <form class="navbar-search-sm" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                    </form>

                    <ul class="list-inline navbar-links-sm">
                        <li><a href="#">Login</a></li>
                    </ul>

                </div>

            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
                <form class="navbar-form navbar-left hidden-xs" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <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><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>
    <!-- End Navbar -->

You can also customize the CSS accordingly:

.navbar-search-sm{ display: inline-block; margin-top: 8px; }
.navbar-search-sm .form-group{ width: 300px; margin-bottom: 0; }
.navbar-links-sm{ display: inline-block; margin-left: 15px; }

Answer 2

When the toggle button on the navigation bar is clicked in a mobile device, the collapsible menu will appear. The default navigation bar includes a search option that cannot be changed without altering the bootstrap default behavior. However, there is a workaround available. You can hide it by adding an additional class called "hidden-xs" and then insert another div with the class "visible-xs" to place the form specifically for mobile devices.

Below is a sample HTML structure:

<!-- Navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <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="#">Title</a>

                <div class="visible-xs">
                    <form class="navbar-search-sm" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                    </form>

                    <ul class="list-inline navbar-links-sm">
                        <li><a href="#">Login</a></li>
                    </ul>

                </div>

            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
                <form class="navbar-form navbar-left hidden-xs" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <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><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>
    <!-- End Navbar -->

You can also customize the CSS accordingly:

.navbar-search-sm{ display: inline-block; margin-top: 8px; }
.navbar-search-sm .form-group{ width: 300px; margin-bottom: 0; }
.navbar-links-sm{ display: inline-block; margin-left: 15px; }

Answer 3

Answer №2

Here is a different method Utilizing the screen resolution of iPhone 5 and 5S

Enclose the ul input tag and login div within a new div with the id form_login and apply the following style below:

@media screen and (min-width: 320px) and (max-width: 568px) {
  #form_login {
    position: absolute;
    top: 0;
    transform: translate(0, 50%);
  }
  #navbarCollapse {
    padding-top: 120px;
  }
}

View the demonstration on fiddle here (resize window width)

Additional media rules will be necessary for other devices

Answer 4

Here is a different method Utilizing the screen resolution of iPhone 5 and 5S

Enclose the ul input tag and login div within a new div with the id form_login and apply the following style below:

@media screen and (min-width: 320px) and (max-width: 568px) {
  #form_login {
    position: absolute;
    top: 0;
    transform: translate(0, 50%);
  }
  #navbarCollapse {
    padding-top: 120px;
  }
}

View the demonstration on fiddle here (resize window width)

Additional media rules will be necessary for other devices

Center the search box in responsive mode

Answer №1

Answer №2

Similar questions

Is it necessary to bring in CSS for the following page?

What is causing the continuous appearance of null in the console log?

What steps can be taken to ensure that the design of this page flows seamlessly?

AngularJS Toggle Directive tutorial: Building a toggle directive in Angular

Issue with table not remaining inside the div on the content page of WordPress site

Move your cursor over the image to activate the effect, then hover over it again to make the effect disappear

`Why are my overflow-x and flex-wrap not functioning as expected in React JS?`

What methods can I use to ensure that content is not obstructed by the Android virtual keyboard? Leveraging Bootstrap

Using Bootstrap SCSS in ReactJS without applying Bootstrap CSS classes

Is it better to use multiple canvases or stick to a single canvas?

Choosing "grandoffspring"

The custom CSS styling is triggered only when the page is resized in Bootstrap

Displaying tooltips with ngx-charts in Angular

What are some ways to enhance the loading time of my PHP-powered website?

Issue with Element's Response to JQuery Click Event

Email Coding Problem

The divs contained are misaligned and not properly centered on the page

Customizing nested tables in your HTML email

The CSS code designed to limit the display to only a two-line sentence is failing to work properly in Internet Explorer

Using Angular 2 alongside Twitter Bootstrap