The Twitter Bootstrap 3 navbar on the right side, positioned outside the collapsible navbar

When using Twitter bootstrap 2.3.2, I could implement the following code snippet: http://jsfiddle.net/aQwUZ/3/ 

<div class="navbar navbar-inverse navbar-fixed-top">

        <div class="navbar-inner">
            <div class="container">

                <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a href="#" class="brand">BRAND</a>
                <ul class="nav  pull-right">
                  <li>
                    <a href="#">Fixed Link</a>
                  </li>
                </ul>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="#">L1</a></li>
                        <li><a href=#">L2</a></li>
                    </ul>
                </div>

            </div>
        </div>
</div>

This code represents a twitter bootstrap navbar where, in mobile responsive view, the "Fixed Link" remains visible in the header.

After updating to bootstrap 3, my code now looks like this: http://jsfiddle.net/EC3Ly/4/

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">BRAND</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                          <li>
                            <a href="#">Fixed Link</a>
                          </li>
                </ul>
                <div class="navbar-collapse collapse">

                    <ul class="nav navbar-nav">
                         <li><a href="#">L1</a></li>
                        <li><a href=#">L2</a></li>
                    </ul>

                </div>

            </div>
</nav>

In mobile responsive view, the layout is displayed on 2 lines instead of one. I have attempted wrapping it with a "navbar-header" node http://jsfiddle.net/EC3Ly/5/ or placing it within the first "navbar-header" without success.

What am I overlooking?

Thank you,

Alexandre

htmlcsstwitter-bootstrapnavbartwitter-bootstrap-3

Answer №1

I encountered a similar issue with Bootstrap 3, and the workaround I discovered was to utilize both pull-left and pull-right classes.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">BRAND</a>
    </div>
    <div class="navbar-header pull-right">
      <ul class="nav navbar-nav pull-left">
        <li>
          <a href="#">Fixed Link</a>
        </li>
      </ul>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">L1</a></li>
        <li><a href="#">L2</a></li>
      </ul>                    
    </div>
  </div>
</nav>

See it in action:

Answer №2

The appearance of two lines in the mobile navbar is a result of the clearfix used in the navbar-header:

.navbar-header {
  .clearfix();

  @media (min-width: @grid-float-breakpoint) {
    float: left;
  }
}

To resolve this issue and add a new style before the collapsed dropdown, you can utilize media queries and CSS to modify the clearfix property.

.navbar-right {float: right !important;}

@media(max-width:767px)
{
    .navbar-right {margin-right:20px;}
    .navbar-header:after 
    {
    clear: none;
    }
    .navbar-nav.navbar-right > li { float: left; }

    .navbar-collapse:before {clear:both;}

    .navbar-collapse {overflow-y: hidden;}
    .navbar-collapse.in {overflow-y: visible;}
    .navbar{border-color: #101010; border-width: 0 0 1px;}
    .navbar-collapse.in > ul {border-color: #101010; border-top:1px double;}
}

}

Check out the demonstration here:

The usage of media queries also includes adding a float right for navbar-right on smaller screens. Before implementing this code in a production environment, make sure to adjust the borders and potentially the CSS transitions of the navbar as well.

Answer №3

The issue lies with the breakpoint at which the navbar collapses in Bootstrap. By default, it collapses at 768px. To resolve this problem, you can adjust the collapsing point of the navbar to occur sooner.

A simple way to achieve this is by customizing your bootstrap file and modifying the @grid-float-breakpoint to a value like 850px (or any other size that fits your requirements). Customizing Bootstrap 3 can be easily done through http://getbootstrap.com/customize/?id=9720390

I hope this information is helpful for you.

Answer №4

This is how I resolved the issue. After the brand, I inserted two new lines with the same class and an extra class.

        <!-- Branding Image -->
        <a class="navbar-brand" href="{{ url('/') }}">Home</a>
        <!-- Fake branding to prevent disruption of navbar -->
        <a class="navbar-brand navbar-brand-fake">Item 1</a>
        <a class="navbar-brand navbar-brand-fake">Item 2</a>

Don't forget to add this to your CSS file:

a.navbar-brand-fake {
    font-size: 15px;
    line-height: 21px;
    margin-left: 2px !important;
}

By doing this, Home, Item 1, and Item 2 will stay in the navbar when resizing without causing any breaks.

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

Remove Images from Bootstrap Carousel on Small Screens

Hello there, I am currently working on making the Bootstrap Carousel responsive for my project. Everything seems to be working fine at the moment, but I would like to tweak it so that the images are hidden if the screen width is less than a certain value ...

javascripthtmlcsstwitter-bootstrap

Navigating within fixed-positioned divs

I'm attempting to create something similar to the layout seen on: The desired effect is to have fixed content on the right side, with only the left side scrolling up to a certain point before the entire page scrolls normally. However, in my implement ...

javascripthtmlcssscroll

I am facing an issue where the weather information is not being displayed even after sending a request to

I'm working on building an app that will provide users with weather data once they input a city. Utilizing the openweathermap.org API for this purpose, I've noticed in my console under networks that an API call is made when the city is entered, b ...

htmlcssreactjs

All components in my app are being styled by CSS files

Currently, I am facing an issue with my React app in VS Code. My goal is to assign a distinct background color to each component. However, the problem arises when unwanted CSS styles from other files start affecting components even though they are not impo ...

cssreactjs

A beginning tag was identified, but another element of identical type was already in an active state

Hi there, I'm encountering three errors when attempting to validate my project. The errors are: 'An a start tag seen but an element of the same type was already open.', 'End tag a violates nesting rules.' and 'Cannot recover a ...

html

Error message displaying "Invalid ID attribute in HTML 5 input"

On my website, I have a page with multiple items, each containing an HTML5 input field. Whenever a user changes the value of the input, it triggers an AJAX call to the server. The server then responds with JSON data, including an array of items that have ...

javascripthtmlajax

What is preventing me from creating accurate drawings on canvas?

I'm currently working on a paint application and facing an issue. When I place the painting board on the left side of the screen, everything works fine and I can draw without any problems. However, when I move it to the right side of the screen, the m ...

javascripthtmlcsscanvas

Struggling to align your image properly?

My attempt to center the image "Logo_Home.svg" on my page has failed, as it is currently positioned in the top left corner. Can anyone help me identify what I am doing wrong and guide me in the right direction? Thank you. EDIT 1 I realized that I forgot ...

htmlcsssvg

Tips for adjusting a background image to be fixed horizontally with the background-attachment property without affecting the vertical

I am facing a challenge with aligning the background image inside the #main div with that of the body. Both backgrounds are similar and I want them to be properly aligned, but with only horizontal repeating on the #main background. The aim is to prevent th ...

htmlcss

Is there a way to smoothly slide an element in the same way another element can be dragged out

I am currently using AngularJS. My goal is to achieve the following: When the 'Fade in' button is clicked, a hidden element should slide out from the left side. It should appear behind the 'MAIN BASE' element, giving the illusion that ...

htmlcssangularjsangular-material

Do all links need an href attribute?

I'm inquiring about this because I have specific links that function as buttons to retrieve content through ajax, eliminating the need for href tags. (This inquiry is driven by SEO considerations) ...

htmlhyperlinkseo

Tips for avoiding tagline text overlapping with other content

I'm facing a dilemma with my Bootstrap template where my tagline overlaps all other content on the page. When I scroll down, the text lays over my logo and navbar, creating a messy look especially on smaller screens. Despite trying to adjust the z-in ...

cssbootstrap-4

Scrolling to the next div will automatically align it in the center of the screen for the user

I am in the process of creating a single-page website and I would like to stack multiple divs on top of each other, all approximately 400px in size (with variations). Instead of using a smooth scroll, I want the page to jump to the next div and have it cen ...

javascriptjquerycsshtml

Creating interactive dialogue: the speech bubble script

I'm having trouble with my code overlapping in sections, and I just can't seem to figure out why. I've tried adjusting borders, adding padding, adjusting spaces, changing widths, reviewing the code, and even removing absolute positions, but ...

htmlcss

I'm struggling to understand why the jQuery find() method isn't functioning as expected

UPDATE: In a twist of events not caused by syntax errors, but rather by a loading issue with the html template, it turns out that the checkbox update was happening prematurely. So if you're searching for an element that seems to be missing, it may sim ...

javascriptjqueryhtml

Having difficulty attaching elements to the bottom of a page

Kindly review the demo code provided. The issue is that when you scroll to the bottom, the stick to top element remains at the top as expected, but the stick to bottom element does not stick to the bottom as intended. Is there an error in the code? < ...

htmlcssbootstrap-4

Finding out the specific row that was clicked in a Jquery Mobile listview

I've searched everywhere and can't find a solution. How can I retrieve the value of a row tapped in a listview? This could be anything from the name to the index within the object. Currently, I have a function handling the tap event. I need to pa ...

javascriptjqueryhtmlmobilejquery-mobile

How can I modify the background color of the datePicker?

I have a couple of inquiries about customizing the DatePicker: Is there a way to modify the background color of the datePicker using CSS? For instance, I would like to change the current green color to blue. Link to datepicker image (Just to note, JS ca ...

css

Determine whether a click event originated from within a child window

Currently, I am utilizing window.open to initiate a new window in javascript and my goal is to identify clicks made within the child window. Essentially, if a click event occurs in the child window, I aim to modify the parent window accordingly. I have a ...

javascriptjqueryhtml

Occupying room while using display: none in <td>

As a newcomer to media queries and .net, I find myself struggling with the code below. At max-width 775px, my goal is to have the first td disappear completely and be replaced by the second td. However, it seems that while the first td becomes 'invisi ...

htmlcssrazor