The search box in the navbar of the website appears differently on Chrome compared to Firefox when using Twitter

I'm currently facing an issue with the navbar on my website. In Chrome, everything is displayed perfectly in one line - the logo, links, and search box with a button. However, when I switch to Firefox, the layout gets all messed up like this:

Below is the code I'm using:

<header>
        <nav class="navbar navbar-default" role="navigation" id="navbarStyle">             
          <div class="nav navbar-nav navbar-left">      
            <a href="<?=base_url()?>">Brand</a>
           </div> 

       <div class="nav navbar-nav navbar-right">                         
        <form class="navbar-form navbar-left navbar-search" role="search">
                        <div class="form-group">
                            <div class="input-group">
                            <div class="col-lg-1">    
                            <input type="text" class="form-control"placeholder="Search">
                            <button type="submit" class="btn btn-danger">
                            <span class="glyphicon glyphicon-search"></span>
                            </button>
                            </div>
                            </div>
                        </div>
                    </form>
                </div>

            <div>
                <ul class="nav nav-justified">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
        </nav>
    </header>

I've been trying to resolve this issue for hours but to no avail. Any assistance on this matter would be greatly appreciated. Thank you!

Answer №1

It seems that the issue you're facing is related to the col-lg-1 class being used on the div surrounding the form control. This class is restricting the width of the div to 1/12th of its parent element, causing the search button to move to the next line. Removing this div completely will allow it to adjust to the maximum width of the parent. Make sure to refer to the bootstrap Grid documentation to understand how to correctly utilize it.

Additionally, enclosing your search button within

<span class="input-group-btn">..your button..</span>
will ensure it is displayed correctly. You can find more information on this at http://getbootstrap.com/components/#input-groups-buttons

Below is the modified version of your code:

<header>
    <nav class="navbar navbar-default" role="navigation" id="navbarStyle">             
        <div class="nav navbar-nav navbar-left">      
            <a href="<?=base_url()?>">Brand</a>
        </div> 

        <div class="nav navbar-nav navbar-right">                         
            <form class="navbar-form navbar-left navbar-search" role="search">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-danger">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </div>
            </form>
        </div>

        <div>
            <ul class="nav nav-justified">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
    </nav>
</header>

Please note that this version has not been extensively tested and may not render well on smaller screens. However, feel free to try it out and see if it resolves your issue.

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

Steps to update the bootstrap version in an existing project

My current project was built using Bootstrap 3.3.6 classes, but now I want to take advantage of the features offered by Bootstrap 5.2. However, simply changing the version of Bootstrap isn't as easy as it sounds. What is the most effective way to upgr ...

Matching an element that contains a specific string in JS/CSS

I'm currently faced with an HTML file that's being generated by an outdated system, making it tricky for me to control the code generation process. The structure of the HTML code is as follows: <table cellpadding=10> <tr> ...

Looking for a way to limit the number of characters allowed per line in a textarea using jQuery

I have the following HTML textarea: <textarea name="splitRepComments" cols="20" rows="3" ></textarea> I have implemented a maxlength restriction using jQuery with the following function: var max = 100; $('#splitRepComments').bind(" ...

Select multiple options by checking checkboxes in each row using React

Is it possible to display multiple select checkboxes with more than one per row? For example, I have four options [a, b, c, d]. How can I arrange it to have 2 options per row, totaling 2 rows instead of having 1 option per row for 4 rows? ☑a ☑b ☑c ...

What is the best approach to effectively manage right-to-left text-input fields?

I have been working on a project involving a multilingual layout. One concern that has arisen is: What is the proper way to handle text-input in this scenario? To better explain my issue, I created a JSFiddle. If I simply add the attribute dir="rtl", ...

Is there a way to attach an event for multiple arithmetic operations to a checkbox?

My form includes 4 checkboxes for different mathematical operations. <form action="" method="POST"> Select number of questions: <input type="number" name="que" value="que"> <br> <br> Select number of series: <select name="sel ...

I prefer to prevent the page from refreshing once the PHP code is executed

<?php $sendTo = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45203d242835292005203d24283529206b2b29">[email protected]</a>"; //Receiver mail $name = ""; //Sender's Name $email = ""; //Sender' ...

What is the best way to locate and list all video links, and include options for "Play Video" and "Download Video"?

I have a project where I am using PHP to crawl and generate video links from the web. Now, I am looking to implement an option for users to either "Play Video" or "Download Video" when a video link is detected, along with adding a video player if the user ...

What could be causing my dropdown links to malfunction on the desktop version?

I've been developing a responsive website and encountering an issue. In desktop view, the icon on the far right (known as "dropdown-btn") is supposed to activate a dropdown menu with contact links. However, for some unknown reason, the links are not f ...

The sequence of divs in a language that reads from right to left

Is there a way in HTML to designate a set of divs so that they automatically align from left to right for languages that read left to right, and alternatively, flow from right to left for languages that read right to left? This means that the direction of ...

Concealing and revealing an element using the CSS property visibility:hidden/visible

There are two div-boxes that should show/hide when clicking on another two div-boxes. I want the divs to maintain their space so as not to disrupt the DOM, ruling out the use of .toggle(). I attempted this approach without success: $('#red, #pink&ap ...

Tips for altering port in PHP and preventing Content or Connection issue in Firefox

I have been encountering an issue with my server administration page which is developed in PHP. One of the key functionalities allows users to change the port through which the admin page can be accessed. This port adjustment is facilitated by a numerical ...

Is the background image viewport centered?

I am embarking on a new venture with a website design that is unfamiliar to me, but I have a clear goal in mind... My design concept involves a single large image measuring 1000px x 1000px as the background, while the actual content fills up only 500px x ...

Browsers seem to only respond to the FileReader onload event on the second try

Currently I am working on implementing in-browser image processing using HTML5 and encountering a strange issue specifically in Chrome. The problem lies with the onload event handler for the File API FileReader class, as the file is only processed correctl ...

How is the height or width of the Bootstrap modal determined?

I'm having trouble utilizing Jschr's modified Bootstrap-Modal for different modal sizes. I can't seem to understand why some modals appear taller, wider, or have other specific dimensions. For more information, refer to the documentation: ...

automatically closing bootstrap alerts upon form submission

I'm working on an ajax form that sends data to a database and utilizes bootstrap alerts to notify the user when the process is successful. I want these alerts to automatically close after a certain period of time, consistently. Here's the issue: ...

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?

How can I ensure that the mat-menu-item button is the same size as the mat-menu itself? For example, click here <div class="container d-block d-md-none"> <div class="row"> <div class="col d-flex justify-content-cent ...

Choose solely the initial and concluding hyperlink within the divs

The structure I am working with is as follows: <div class="navigation_sub_item_background" id="sub_nav_2"> <div class="navigation_sub_item" id="2_1"> <a class="navigation__sub__link" href="?p=2_1"> <span> ...

Check that EACH radio button has been either selected or left unselected when the button is clicked

I'm still learning Javascript and currently working on a function triggered by a button click. My goal is to display an alert if NONE of the radio buttons have been selected, regardless of whether they are "Yes" or "No." If ALL radio buttons have been ...

The appearance of an SVG image inside an absolutely positioned div varies between Firefox and Chrome

The web page I am working on can be found at the following link: This webpage consists of text and SVG images, with the hex bolts positioned over specific areas of the text. Achieving this effect requires absolute positioning within a relatively positione ...