Utilizing BootStrap 3 to Display Dual Navigation Headers Side by Side in a Single Row

I need help with organizing my BootStrap 3 nav header. I want to move the single dropdown item to the far right, while keeping the rest of the main menu items aligned to the far left. Can someone guide me on how to achieve this?

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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 class="navbar-brand" href="index.html">Cost Tracking</a>
        </div>
        <ul class="nav navbar-top-links navbar-left" style="margin-left:96px">
        <button type="button" class="btn btn-primary btn-sm">Project Details</button>
        <button type="button" class="btn btn-primary btn-sm">Cost Centre</button>
        <button type="button" class="btn btn-primary btn-sm">Address Book</button>
        <button type="button" class="btn btn-primary btn-sm">Time Tracking</button>
        <button type="button" class="btn btn-primary btn-sm">Reports</button>               
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
                </a>                    
                <ul class="dropdown-menu dropdown-user">                      
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                    </li>
                </ul>
            </li>
        </ul>

        <div class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">                     
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                        </div>
                    </li>
                    <li class="background-color:#333">
                        <a href="#"><i class="fa fa-edit fa-fw"></i> Project Info</a>                            
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-user fa-fw"></i> Project Roles</a>                            
                    </li>
                    <li>
                        <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Rate Schedule Review</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Surcharges</a>
                    </li>
                    <li>
                        <a href="tables.html"><i class="fa fa-group fa-fw"></i> Project Crews</a>
                    </li>
                    <li>
                        <a href="forms.html"><i class="fa fa-user fa-fw"></i> Project Employees</a>
                    </li>                        
                </ul>
            </div>
        </div>
    </nav>
htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

To position a navigation on the right side of the navbar according to the documentation, it needs to be placed within its own <ul>:

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
      </a>                    
      <ul class="dropdown-menu dropdown-user">                      
        <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
        </li>
        <li class="divider"></li>
        <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
        </li>
      </ul>
      <!-- /.dropdown-user -->
    </li>
    <!-- /.dropdown -->
</ul>

Remember that every child of a <ul> must be a <li>, so your <button>s should be enclosed in list elements:

<li><button type="button" class="btn btn-primary btn-sm">Project Details</button></li>

Check out the demo

If you prefer not to use a separate list, you can override the float on the <ul> and float the final <li> to the right. Also, ensure to add the .dropdown-menu-right class to the dropdown <ul>.

...
<li><button type="button" class="btn btn-primary btn-sm">Reports</button></li>
<li class="dropdown pull-right">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
  </a>
  <ul class="dropdown-menu dropdown-menu-right dropdown-user">                      
    <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
    </li>
    <li class="divider"></li>
    <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
    </li>
  </ul>
  <!-- /.dropdown-user -->
</li>

CSS

.navbar-nav {
  float: none;
}

View the CSS demo here

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

Navigating with Express while incorporating React

I am struggling to set up the routes for my web application using Express, as well as incorporating React for the front end. The issue lies in properly routing things when React components are involved. My index.html contains: <script> document.get ...

javascripthtmlreactjsexpress

Encountered an error when attempting to use 'appendChild' on 'Node': the first parameter is not the correct type. It was able to work with some elements, but not with others

I'm currently working on a script that utilizes fetch to retrieve an external HTML file. The goal is to perform some operations to create two HTMLCollections and then iterate over them to display a div containing one element from each collection. Here ...

javascripthtmldomchild-nodes

What is the method for configuring automatic text color in CKEditor?

https://i.sstatic.net/yEM3p.png Is there a way to change the default text color of CKEditor from #333333 to #000000? I have attempted to modify the contents.css in the plugin folder: body { /* Font */ font-family: sans-serif, Arial, Verdana, "Tr ...

javascripthtmlcssckeditoreditor

What are the steps to adjust the width of a website from the standard size to a widescreen

Is it possible to create a "floating" screen adjustment on websites? I know you can set the standard size of pixels, but how do sites adjust for different screen sizes like wider laptop screens? Does it automatically detect the reader's screen size an ...

javascripthtmlcss

Mobile site experiencing owl.carousel responsiveness issues after refreshing the page

I am currently working on a website located at . On the homepage, right after the slider, there is a carousel of three info boxes. However, in mobile view (developer mode), after a hard refresh or viewing the link on an actual mobile device, it displays a ...

javascripthtmlcss

Issue with Iframe DOM: encountering undefined values while attempting to retrieve form field data

For some reason, I've been struggling to debug a piece of JavaScript that should be straightforward. I've experimented with various approaches, such as using a form to access fields and using getElementById. I've also played around with incl ...

javascripthtmldomiframe

Encountering an unusual hash code when implementing Google Tag Manager in a Next.js project was

I am currently using Next.js and have added Google Tag Manager through a script <script dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var ...

javascripthtmlreactjsnext.jsfrontend

Ways to declare a function within the events onMouseOver and onMouseOut

<div align="right" style="border:1 #FF0 solid; background-color:#999" onMouseOver="javascript: function(){this.style.backgroundColor = '#DDD';}" onMouseOut="javascript: function(){this.style.backgroundColor = '#999';}"> Register & ...

javascripthtmlcss

"Encountering an Internal Server Error while trying to submit the

Seeking Assistance: I am experiencing an error when attempting to send a contact form. https://i.sstatic.net/7sK58.jpg The Visual Basic code causing the issue: <% mail_to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail=" ...

htmlvbscriptasp-classic

Customize Swiper js: How to adjust the Gap Size Between Slides using rem, em, or %?

Is there a way to adjust the spacing between slides in Swiper js using relative units such as 2rem? The entire page is designed with relative units. All measurements are set in rem, which adjusts based on the viewport size for optimal adaptability. For i ...

javascriptcssswiper.js

I need help setting up a link in HTML that redirects to the correct webpage when clicked. How can I make this happen smoothly?

<!DOCTYPE html> <html> <head> <title>______</title> <button class="btn about">About</button> <button class="btn socialmedia">Social Media</button></button> <button class ...

htmlcss

Softening the edges of a table

Could you assist me in rounding the corners of my table? I attempted using the basic border-radius, however, it only separated the border at the corners. Do you think this issue is due to my browser (Firefox) or could it be a bug? You can view my Jsfiddl ...

htmlcsscss-tables

In search of a CSS selector that can target elements based on specific text contained within them

Query: <div class="btn btn-second-in-pair-not-desired btn-tall">Clear search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Raw Search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Basic Searc ...

htmlcssseleniumselenium-webdriver

Utilizing jSignature canvas plugin with jQuery to display in an ASPX.NET environment

Currently, I am utilizing JSignature to collect the user's signature using html5/Jquery Mobile. The signature consists of alphanumeric values that are then saved in the SQL Server 2008 database. My challenge now is displaying this signature in ASP.NE ...

asp.nethtml

The execution of Ajax is not taking place

Hey, I'm facing an issue with AJAX in my project. It's working fine in other files, but for this specific instance where I call scripts/claim.php and pass an id parameter via GET, it's not functioning as expected. HTML <input type="hidd ...

phpjavascripthtmlajax

The challenge of handling success and error messages in Ajax with HTML

I encountered an issue with this concrete problem. My goal is to dynamically display a message within a specific div based on the response from my ajax request. I have set up two divs with IDs #uploadResponsesuccess and #uploadResponseerror. However, since ...

javascriptjqueryhtmlajax

Adding a div to a different webpage using jQuery

I am currently working on a small admin panel and I was curious if it is feasible to use jQuery to add a div box inside the index.php file after clicking a button in the panel? If this is possible, an example demonstrating how to do so would be greatly ap ...

phpjqueryhtmlpaneladdition

Displaying a variable in a live HTML user interface

I have successfully created a Python program that captures data from an Arduino Potentiometer and shows it on the Python console. Now, I am working on enhancing the output by displaying it in a local HTML file. I am seeking guidance on how to incorporate t ...

javascriptpythonhtmlcss

Tips for aligning an image in the center with a background attachment

I am facing an issue where only half of the image shows up when inserting the fixed effect. I need the entire image to be visible on the right side while adapting it for mobile devices. * { margin: 0; padding: 0; box-sizing: border-box; } .con ...

htmlcsscss-selectors

I have a `null` input value. Is there a way to compute this value in relation to a date

When the input is null, what can be done to calculate the value with date? https://i.stack.imgur.com/DmFsJ.png /* // ======================================================== * * * * * How To Calculate Input Value With Date When Input Is Null * * */ // ...

javascripthtmldate