How to Align Navigation Searchbar in Center When Bootstrap is Collapsed

I am attempting to center my search bar when it is collapsed.
Currently, it appears like this:

As you can see, the links are centered, but not the search bar.

This is the existing HTML structure:

<!-- Navigation Bar Start -->
    <div class = "navbar navbar-default navbar-static-top"> 

        <!-- Container -->
        <div class = "container">

            <div class=".navbar-header">

            <!-- Site Title -->
            <a href = "#" class = "navbar-brand">James Woods</a>

            </div> <!-- END Navbar Header -->

            <!-- Mobile Nav Button -->
            <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button> <!-- END Mobile Nav Button -->

            <!-- Navigation Links -->
            <div class = "collapse navbar-collapse navHeaderCollapse">

                <ul class = "nav navbar-nav navbar-right">

                    <li class="active"><a href = "">Home</a></li>
                    <li><a href = "">Creations</a></li>
                    <li><a href = "blog/index.html">Blog</a></li>

                    <li class = "dropdown"> 
                        <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Links<b class = "caret"></b></a>

                        <ul class = "dropdown-menu">
                            <li><a href = "#">Twitter</a></li>
                            <li><a href = "#">Deviant Art</a></li>
                            <li><a href = "#">Scratch</a></li>
                        </ul>
                    </li> <!-- END Links Nav -->

                    <li><a href = "contact.html">Contact Me</a></li>

                    <li>

                        <form class="navbar-form navbar-left form-inline" id="search" role="search">

                            <div class="form-group-group">
                                <div class="input-group" style="width: 220px;">
                                    <input type="text" class="form-control" placeholder="Search">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button"><b class = "glyphicon glyphicon-search"></b></button>
                                    </span>
                                </div>
                            </div> <!-- END form group div -->

                        </form> <!-- END search bar form -->

                    </li>
                </ul> <!-- END navbar list -->

            </div> <!-- END navbar collapse div -->

            </div> <!-- END .navbar-header div -->

        </div> <!-- END container div -->

    </div> <!-- END navbar div -->

    <!-- END ALL NAVBAR CONTENT -->

And here is the applied custom CSS:

@media (max-width: 768px){
.navbar-nav li{
text-align: center;
}
}

Answer №1

To style the input-group in your CSS, add the following code: margin: 0 auto;

@media (max-width: 768px){
.navbar-nav li {
    text-align: center;
    }
    .navbar-form .input-group {
    margin: 0 auto;
    }
}

For a live example, visit this link:

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

Creating a Dynamic Login Panel Using HTML, CSS, and Jquery

Designing a dynamic sliding login panel utilizing Html, CSS, and jquery alongside various plugins. Check it out here: http://24.125.42.135/ When activated, the bar smoothly pushes down the content (click on the login option at the top right corner). This ...

The fixed left div and scrollable right div are experiencing issues with their alignment

I am having an issue with a section where the left div is fixed and the right div is scrollable. However, the content of the right div scrolls even before the scroll top reaches the section. My goal is for the right div to scroll only when it reaches the t ...

Problem: Challenge in Iterating and Assigning Variables to HTML Table Elements

I am currently working on a project that involves tracking the order statuses of individual shipments from a list of URLs stored in an Excel sheet. The code I have written is capable of looping through the URLs and extracting information from them successf ...

Object of Razor enclosed within an anchor tag

Exploring the realm of MVC 4 and Razor is new to me. Currently, I am attempting to create a Gallery with "CSS3 Lightbox". Everything seems fine, but I am encountering difficulties with Razor and links. The issue lies in my understanding of the pre and ne ...

`CSS Animation fails to run in Internet Explorer and Microsoft Edge browsers`

My issue with the CSS animation is that while the opacity animates properly, the translate effect does not seem to work as expected. You can see the problem here: https://jsfiddle.net/bLxb8k3s/ It appears that the reason for this issue is because IE and ...

The display of treepanel response text on an extjs grid within a layout-browser is achieved through the use of the

I am attempting to showcase an ExtJS grid and tree within a layout-browser. The tree's response data is displayed in the ExtJS grid, which then dynamically refreshes. My goal is that when I click on a tree leaf, the data from that leaf should be displ ...

What is the best way to use CSS to hyphenate a capitalized word?

I have a single word that needs to be hyphenated, but the lang=en hyphenate: auto property does not work on capitalized words. To address this, I utilized the slice function in JavaScript to split the word in half so that the second half, which requires h ...

Tracing a path with a snapping motion using my thumb

Before we begin, let's take a look at the example below. The functionality of this component should mimic that of an input type range. However, I am facing some challenges in calculating the step value and snapping the thumb onto the trail based on t ...

Yet another inquiry about the inexplicable failure of my jQuery Ajax in Internet Explorer

Just need to double-check if my test code below is correct. I've done some research and it appears that html syntax errors can cause the jquery ajax to not work in Internet Explorer? There are several includes where this code is located, so could the ...

Sections that intersect one another

The 'home-screen' section overlaps with every other section. You can check out the live link here: Hello Sylhet. However, the page should actually look like this: https://i.sstatic.net/VQwG4.jpg ...

A CSS3 property that does not have a vendor prefix, followed by properties that do have vendor prefixes

As discussed in a response on Stack Overflow, one reason for the necessity of vendor prefixes in CSS properties is to prevent web pages from breaking even if the final specification varies from the implementation by different browsers. In a recent reading ...

One DataTable cell with a unique feature: two buttons of varying sizes

Currently, I am working with a DataTable that contains a column with two Bootstrap-styled buttons. Strangely, the button on the right appears slightly smaller than the one on the left. Picture illustrating the issue Here is the code snippet: <div cla ...

I cannot seem to alter the background color of my image through the use of external CSS

body { background-color: #f6f7d4; } h1, h3, hr { color: #68b8ab; } hr { width: 100px; border-style: dotted none none; border-color: gray; border-width: 5px; } img { background-color: black; } Although the external CSS code a ...

What's the best way to ensure my website's footer spans the entire width of the webpage?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Elena Brown | Graphic Designer</title> <link rel="stylesheet" href="CSS/normalize.css"> <link href=' ...

Troubleshooting issue with Django development server causing HTML5 video element to become non-seekable

My Django app is currently serving a webpage with an HTML5 video element, but I've encountered a strange issue. The video.seekable property is returning a timeRanges object with a length=0, when it should actually be length=1. Unfortunately, this mea ...

Extract the content within an HTML element that is not within a header tag

Is there a way to extract the inner text from HTML using HTMLAgilityPack in C#, excluding text within any <h1-6> tags? I prefer not to use Regular Expressions and stick to HTMLAgilityPack. This is my current approach: var document = new HtmlDocumen ...

What is the best way to distribute components with varying cell heights?

I am currently working on creating a user interface layout with components that need to be arranged in a specific order, as depicted in the accompanying image. My task involves developing a Material UI Dialog within a React application based on the design ...

What is the best way to adjust the size of carousel images within a box element?

How can I ensure that carousel pictures are displayed clearly within the box without overflowing? The code I tried resulted in the pictures overflowing from the box and not being visible clearly. How can I resolve this issue? .container { width: 1490px; ...

The input element extends beyond the boundaries of the container

When the text is too long, the input exceeds the boundaries of its parent container. I have been exploring ways to wrap the text within the element. I attempted using CSS properties like word-break and text-wrap, but unfortunately, none of them produced t ...

Tips for positioning a chat box at the bottom of a v-card's visible area

My goal is to create a chat app using Vuejs 3 and Vuetify 3, but I'm encountering an issue aligning the chatbox with the v-card component. Instead of being positioned at the bottom of the v-card, the chatbox (green) appears at the bottom of the page. ...