My navbar in bootstrap is having trouble staying aligned with the button and search box. What can I do to ensure everything stays in line?

<nav id="NavbarMaster" class="navbar NavCompression">
  <!-- style="min-height:100px;" -->
  <div id="navToggler" class="container-fluid  TitleBG TitleHeight">
    <div id="navopener" class="Pointer" style="position:fixed;top:0;left:0;right:20%;bottom: calc(100% - 50px);background-color:transparent;"></div>
    <div class="navbar-header">
      <p class="navbar-brand WhiteText standardBtn Pointer">My&nbsp;Area</p>
    </div>

    <div class="navbar-form navbar-right">
      <div class="form-group">
        <input id="txtQuickSearchV2" type="text" class="form-control" placeholder="Search" name="search" />
      </div>
      <button id="btnQuickFind" type="submit" class="btn btn-default">Go</button>
    </div>
  </div>
</nav>

I am facing an issue with the alignment of the 'Go' button and search box in the above navbar. When it resizes to mobile view, they move to separate lines instead of staying aligned right. I believe the navbar-right class should handle this, but it's not working as expected. How can I keep them all in one line?

All the non-bootstrap classes are used for cosmetic purposes such as colors, etc.

EDIT:

Link to the fiddle

htmlcsstwitter-bootstrap-3responsive-designnav

Answer №1

When the design breaks at 768px, you have the option to prevent this by overriding the relevant bootstrap navbar CSS rules. An example of how to do this can be found in this jsfiddle: https://jsfiddle.net/ua0xbg17/1/

To customize the CSS and avoid the breaking point, you'll need to include the following code in your CSS file. Make sure to adjust the min-width values for the container and navbar according to your specific requirements.

@media (max-width: 768px) {
    .navbar-header {
        float: left;
    }
    .container {
        min-width: 380px;
    }
    .navbar {
        border-radius: 4px;
        min-width: 380px;
    }
    .navbar-nav {
        float: left;
        margin: 0;
    }
    .navbar-left {
        float: left !important;
    }
    .navbar-right {
        float: right !important;
    }
    .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }
    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
    .navbar-form {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
    }
    .navbar-nav.navbar-right:last-child {
        margin-right: -15px;
    }
    .navbar-form.navbar-right:last-child {
        margin-right: -15px;
    }
    .navbar-text.navbar-right:last-child {
        margin-right: 0;
    } 
}

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

Displaying a loading screen while a jQuery ajax request is in progress

Currently, I am attempting to display a loading div while waiting for an ajax call to finish. Despite experimenting with various methods, I have not been able to consistently achieve the desired outcome. In my present code, everything functions properly o ...

javascriptjqueryhtmlcssajax

Finding and removing a specific CSS pattern from a webpage that has been loaded

Encountered a troublesome Amazon.com page that appears blank in print preview, specifically the Online Return Center\Your Return Summary page. After much troubleshooting on a locally saved copy of the webpage, I pinpointed the issue to a problematic l ...

cssdeveloper-tools

When flex items are stacked in a column, the bottom portion may be truncated

(Edit) Check out the codepen example here. I am working on creating a stack of cards using Vue.js and flexbox to showcase different apps on my website. Each card is represented by a component and I utilize Vue's `for` function to display cards with t ...

htmlcssvue.jssass

Generating an HTML table from SQL data using PHP

I'm attempting to create a dynamic HTML table using PHP to populate it with data from a MySQL database. I've tried using a while loop, but the issue is that it ends up displaying the same first row multiple times. <div class = "container"> ...

phphtmlmysqlihtml-table

HTML Data Service for WCF

Is there a way for users to easily display a list of their publications on their websites? I'm considering pulling data from a SSRS database and using a WCF Data Service. However, the WCF Data Service only outputs ATOM or JSON data. Is this the right ...

htmlwcf

Utilizing ASP.NET with JavaScript to target elements by ID within an iframe

Struggling to populate my form within an iframe by inputting a value in a textbox and selecting an option from a dropdown menu. webform1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title ...

javascriptjqueryhtmlasp.netiframe

Utilizing Angular 9's inherent Ng directives to validate input components within child elements

In my current setup, I have a text control input component that serves as the input field for my form. This component is reused for various types of input data such as Name, Email, Password, etc. The component has been configured to accept properties like ...

javascripthtmlangulartypescriptforms

Dragging the identical li element from the div for the second time should not trigger a drag and drop action

After successfully dragging and dropping an element from <div id="catalog" > into a box, specifically <div id="dialogIteration">, on the first attempt everything works as expected. However, upon attempting to drag and drop the same element for ...

jqueryhtmljquery-ui-draggablejquery-ui-droppable

Changing the orientation of a dropdown menu from horizontal to vertical

Hello, I am seeking assistance to transform the top dropdown menu layout into a vertical one similar to the menu on the left side. Any help would be greatly appreciated as I am running out of ideas! Thank you in advance! @charset "utf-8"; /* CSS Docum ...

htmlcss

Transitioning to the Full Website with PHP Sessions - Discrepancies in Styling

I've encountered an issue when trying to switch from a mobile site to a full site using sessions. The styles on the full site do not load unless I refresh the page, at which point they finally appear. On my mobile page, there's a link that direct ...

phphtml

Replace text using the str_replace function

I have a total of seven lines of text that I need to manipulate using PHP. My first task is to filter out any lines that do not contain the word 'MARCO1998'. Next, from the remaining lines, I need to extract only the 1-3 numbers that come after ...

phphtml

jQuery registers the enter event, but does not proceed to trigger the enter action

Hey there, I've been experimenting with jQuery to capture the enter event. Something peculiar is happening though - after pressing enter in the text area, an alert pops up but the text gets entered only after that. Despite trying various solutions, I ...

javascriptjqueryhtml

The central navigation system of the Owl Carousel

I am currently using the owl carousel plugin and I am struggling to figure out how to center align the navigation vertically while also using the autoHeight option. http://codepen.io/anon/pen/jJAHL I have attempted the following code snippet, but it seem ...

jquerycssowl-carousel

Implement the backstretch plugin method within a jQuery $.ajax call

I am currently working on integrating an Instagram gallery into a responsive Wordpress theme and have encountered some challenges for which I would appreciate assistance. The process involves fetching the Instagram feed using ajax and jsonp, then appendin ...

wordpressjqueryresponsive-designjquery-backstretch

Imitate the actions of images with {width: 100%; height : auto} properties

I am interested in creating a unique layout that consists of a stripe composed of images with varying widths and heights. These images need to be proportional, scaled at the same height, and collectively have a width equal to the parent element. However, ...

htmlcss

Positioning the box in the middle of pages

I have a website page at the following link: However, the content is not centered on the screen. Here are the codes I'm using: <div class="section_inner"> <div class="container"> <div class="row"> <?ph ...

htmlcss

Ways to distinguish jquery response apart from using $.post method?

Using jquery $.post method: $.post( 'includes/studiesAjax/addTryb.php', {inputVL: inputVL}, function(res){ $("#container").html(res); } ); The response contains a long html code. I am interested in extracting data from ...

phpjqueryhtmlajaxpost

Having trouble with table sorting in Jquery?

I am a beginner in the realm of Jquery and web programming. Recently, I attempted to implement the tablesorter jquery plugin for one of my projects but encountered issues with making it work properly. In search of a solution, I turned to Stack Overflow. C ...

javascriptjqueryhtmltablesorter

Combining various components within an inactive element tag using Vue

I am working on creating expandable rows for a table element using this HTML code snippet. The current approach involves alternating between parent rows and multiple rows within tbody elements. <tbody class="js-table-sections-header">Parent row</ ...

javascriptjqueryhtmlcssvue.js

Increase the size of a centered image within a table

Lately, I've felt like my mind is starting to unravel. Here's the issue at hand: I've been attempting to resize an image within a table cell so that it spans the full width of the cell. Strangely enough, this seems to be harder than anticip ...

javascriptjqueryhtmlcss