How can we ensure that navbar items in Bootstrap 3 stay outside the collapse and don't wrap to a new line?

I am having trouble with my Bootstrap 3 navbar collapsing properly. Any advice would be appreciated.

I have already searched extensively for a solution, but haven't found the right one yet.

The navbar I created is responsive and based on the Bootstrap demo code. It contains a 40x40 image and a globe icon that open dropdown menus, which I have positioned to the right and excluded from the collapse.

However, when the navbar collapses, the 40x40 image and globe icon are displayed on a new line, which is not the desired outcome.

I would like the 40x40 image and globe icon to be on the same line as my brand image, collapse button, etc.; aligned to the right and not included in the collapse.

Below is the code snippet for reference: 

    <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-hd-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 href="index.php"><img class="navbar-brand img-responsive" src="http://placehold.it/138x38" alt="Logo"></a>
    </div>
     <div class="navbar-right">
        <ul class="nav"  style="float: right; display: inline-block !important">
            <li class="dropdown pull-right">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="http://placehold.it/40x40" alt="Profile Image" style="display: inline-block !important"/><b class="caret grey"></b></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">Hello</li>
                    <li class="divider"></li>
                    <li><a href="">Thing 1</a></li>
                    <li class="divider"></li>
                    <li><a href="">Thing 2</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav"   style="float: right; display: inline-block !important">
            <li class="dropdown pull-right">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-globe grey"></span><b class="caret grey"></b></a>
                <ul class="dropdown-menu">
                    <li style="padding: 10px"><p>News</p></li>
                </ul>
            </li>
        </ul>


         <div class="collapse navbar-collapse navbar-hd-collapse">
             <ul class="nav navbar-nav">
                 <li class="active"><a href="">Product</a></li>
                 <li><a href="">Other Product</a></li>
                 <li><a href="">Third Product</a></li>
             </ul>
         </div>
    </nav>

For further reference, please see the JS Fiddle link: http://jsfiddle.net/CaraGee/q8br8/

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Make sure to include the style attribute "float:right" in both the 40x40 and globe divs to ensure that the glyphs appear on the same line.

 <div class="navbar-right" style="float:right;">
    <ul class="nav">
        <li class="dropdown pull-right">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="http://placehold.it/40x40" alt="Profile Image" style="display: inline-block !important"/><b class="caret grey"></b></a>
            <ul class="dropdown-menu">
                <li class="dropdown-header">Hello</li>
                <li class="divider"></li>
                <li><a href="">Thing 1</a></li>
                <li class="divider"></li>
                <li><a href="">Thing 2</a></li>
            </ul>
        </li>
    </ul>
    </div>
     <div class="navbar-right" style="float:right">
    <ul class="nav">
        <li class="dropdown pull-right">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-globe grey"></span><b class="caret grey"></b></a>
            <ul class="dropdown-menu">
                <li style="padding: 10px"><p>News</p></li>
            </ul>
        </li>
    </ul>
 </div>

Answer №2

To create a collapsible div aligned to the left and non-collapsible elements inside a div aligned to the right, follow this structure:

<div class="header header-inverse header-fixed-top">
        <div class="container">
            <div class="header-content">
                <a class="header-brand" href="#">Project title</a>
                <button type="button" class="header-toggle" data-toggle="collapse" data-target=".header-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- COLLAPSIBLE SECTION -->
            <div class="header-collapse collapse header-left">
                <ul class="nav header-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <!-- NON-COLLAPSIBLE SECTION -->
            <div class="nav header-nav" >
                <form class="header-form header-right">
                    <div class="form-group">
                        <input type="text" placeholder="Username" class="form-control">
                    </div>
                    <div class="form-group">
                        <input type="password" placeholder="Password" class="form-control">
                    </div>
                    <button type="submit" class="btn btn-primary">Log in</button>
                </form>
            </div>
        </div>
    </div>

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

Failed to load CSS and JS files

https://i.sstatic.net/tzp6n.png When attempting to launch my project on the server, I am facing issues with the CSS and JS files not loading properly. Below is the code snippet I have been using to include CSS/JS files: <script src="js/jquery.min.js" ...

javascriptcssspringmyeclipse

Creating a customized conditional overflow style in _document.js for Next.js

Is there a way to dynamically change the overflow style for the html and body elements based on the page being viewed? For instance, on the about page, I want to hide overflow for html but not for body, whereas on the contact page, I want to hide overflow ...

javascriptcssreactjsnext.js

"PHP's isset function causes an infinite hang when trying to set a radio

When processing each question <input> set, some questions have radio button answers while others have checkboxes... Upon submitting, the data is inserted into the database $i = 1; while($i<6){ if(isset($_POST['radio' . $i])){ (MY ...

phphtml

Can you show me how to achieve a smooth background color transition for a div that takes 2 seconds to complete when it is inserted into the DOM?

On my webpage, I have a list of items that are constantly being updated via a WebSocket connection to the backend. Each time a new item is added to the list, I would like it to be displayed with a background color transition lasting only a brief moment. ...

htmlcss

I am puzzled as to why my jQuery height and width functions are returning NaN as the result

I am attempting to calculate the ratio of height and width for each image on a webpage. Unfortunately, I am consistently receiving a NaN result and I cannot figure out why. I have been using get() and find() <div class='image-wrapper'> ...

jqueryhtml

Is it possible to use only CSS to crop an image into a square and then shape it into

I am attempting to create a circular shape out of images that have varying sizes and shapes (some rectangular, some square, some portrait, and some landscape). When I apply either clip-path: circle(50% at 50% 50%); or border-radius: 50%;, the image transf ...

htmlcssimage

Spacing between table cells is only applied to the first row and footer

In an attempt to add spacing between the first row, second row, and footer of a table, I have experimented with cell spacing combined with border-collapse. However, the spacing is being applied all over the table instead of in specific areas. I am utilizin ...

cssreactjshtml-tablematerial-ui

Ways to verify the content within two separate p elements

<p> expanded state:</p> <P> true </p> Merging the text from both tags into a single output. Final Output: expanded state: true ...

javahtmlseleniumselenium-webdriver

Seeking assistance with my personal portfolio project - any takers?

I'm facing an error on a coding challenge that says: "The height of the welcome section should be equal to the height of the viewport." I have set it to 100vh but I'm unsure how to resolve it. Here is the HTML code: <header> <nav id=& ...

htmlcss

What is the best way to ensure a "child" div does not overflow on its own and instead utilizes the padding of its parent div for rendering?

Initially, here are my code snippets: In the HTML file: <div class="div parent"> Title <div class="div child"> <div class="overflowed"> </div> </div> </div> CSS Styling: .div { border: 1px solid #0000 ...

htmlcss

Obtaining the innerHTML value using JavaScript in an Asp.net Core 5 View

Apologies for any inaccuracies in my English writing. In the Asp.Net Core project view, I am trying to use JavaScript to capture multiple Span tags within innerHTML represented by a loop and display their sum in another tag. However, I am only able to ret ...

javascripthtmlarraysasp.net-mvcasp.net-core

Only expose the next element when the collapse occurs

In my Flask templates, I am facing an issue with displaying scores using a collapse feature: Contact.html <button type="button" class="btn btn-secondary btn-sm" data-target="#score" data-toggle="collapse" data-pla ...

htmlbootstrap-4

Get rid of the ad wrapper that prompts users to disable their adblocker on the news page

Everyday, I visit the Norwegian news site "www.vg.no" to catch up on the latest news. However, one day while browsing on my school computer with adblock installed, I noticed that the ads were removed but an ad wrapper appeared asking to turn off adblock. B ...

javascripthtmlcss

Solving the issue of IE7 div overflow-y: scroll causing content to be obscured by the scrollbar

I am facing an issue with a table inside a div (#body) that scrolls along the y-axis. Specifically, in Internet Explorer, the scrollbar is hiding part of the last table cell behind it, causing a shift in the layout of the table columns. This problem does n ...

cssinternet-explorergoogle-chromevertical-scrolling

What is the reason for the initial display of an empty option when using AngularJS to select an

Every time I refresh the page, the initial option is blank. How can I set Any Make as the default selection? Below is the code snippet from my view: <select class="form-control" id="make" name="make" ng-init="Any Make" ng-model="makeSelected" ng-chan ...

javascripthtmlangularjshtml-select

Transitioning images in JQuery by using a rollover effect

Is there a way to use Jquery for a hover effect that transitions images with a slide up animation? I've looked everywhere online, but I can't seem to find a code that works. All the examples I've found use fadeIn or fadeOut. Thank you for yo ...

javascriptjqueryhtmlimagetransition

Is it possible to apply capital spacing in CSS for OpenType fonts without using font-feature-settings?

Is it possible to adjust capital spacing (cpsp) for an element without impacting any other applied OpenType features? Unfortunately, utilizing the font-feature-settings is not a viable solution. For example, if we use font-feature-settings: 'cpsp&apo ...

csstypographyopentypefont-feature-settings

Creating interactive labels in a histogram that update based on the user's input

Currently, I have operational code in place that takes input data and generates a histogram based on set thresholds. When the code is executed, the histogram changes dynamically as the threshold slider is adjusted. However, there seems to be an issue wit ...

javascriptjqueryhtmld3.jsplottable

Issues with functionality of JavaScript calculator in HTML forms

Currently, I am working on creating a basic perimeter calculator specifically designed for a projector screen. This code is intended to take the response from a radio button input and the diagonal length in order to accurately calculate the perimeter base ...

javascripthtmlformscalculator

Is the navigation dropdown toggle triggered by both mouseout and when hovering off of it?

I'm looking for some assistance in modifying the code so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another top-level menu button is hovered over. View jsfiddle example $(document).ready(function () { ...

javascriptjquerycss