The navigation bar alignment to the right is malfunctioning

I'm puzzled as to why the navbar-right class is not properly closing out the two navigation bar elements on the right. Despite adding the correct code, it doesn't seem to be working as expected.

<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-expanded" id="mainNav">
  <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-="data-" toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="nav navbar-nav navbar-left">
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#about">About</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#services">Products</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#pricing">Pricing</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#contact">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="nav-item">
          <a class="nav-link page-scroll" href="sign-up" style="background-color:blue; border-radius:5px">Sign Up</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="sign-in" style="background-color:blue; border-radius:5px">Log In</a></li>
      </ul>
    </div>
  </div>
</nav>

https://i.sstatic.net/A4YZ4.png

csstwitter-bootstrap

Answer №1

You must remember to close the collapse button, and there are several errors in the attributes of that tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-expanded" id="mainNav">
  <div class="container">
    <button class="navbar-toggle navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">menu</button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="nav navbar-nav navbar-left">
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#about">About</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#services">Products</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#pricing">Pricing</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#contact">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="nav-item">
          <a class="nav-link page-scroll" href="sign-up" style="background-color:blue; border-radius:5px">Sign Up</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="sign-in" style="background-color:blue; border-radius:5px">Log In</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer №2

Do you need to make a change? Simply add navbar-right to the parent of those two nested <ul> elements, and then remove them from within the <ul>:

<div class="collapse navbar-collapse navbar-right" id="navbarResponsive">

nav {
  margin-top: 100px; /* only for illustration purposes on Stack Overflow*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-expanded" id="mainNav">
  <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">My Menu</button>
    <div class="collapse navbar-collapse navbar-right" id="navbarResponsive">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#about">About</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#services">Products</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#pricing">Pricing</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#contact">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link page-scroll" href="sign-up" style="background-color:blue; border-radius:5px">Sign Up</a></li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="sign-in" style="background-color:blue; border-radius:5px">Log In</a></li>
      </ul>
    </div>
  </div>
</nav>

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

Is it possible to balance proper CSS and Javascript maintenance with the use of a Template Engine?

When using a template engine like Velocity or FreeMaker, you have the ability to break up your HTML into reusable components. For example, if you have an ad <div> that appears on multiple pages of your site, you can create a file containing that < ...

javascriptcssvelocitytemplate-engine

Adjust my website to fit various screen sizes and mobile devices

I'm encountering an issue on my website regarding resizing elements and content on various resolutions, particularly on mobile devices. You can view the website here. I've been testing it on both an iPad and a 14" laptop. While everything appear ...

jqueryhtmlcssipadresize

Issues with displaying AJAX Bootstrap Modals

I'm struggling to display a Bootstrap modal with dynamically generated content from the database. The data is not showing up in the modal body, and I've been troubleshooting this issue for quite some time now. Modal <div class="modal fade" i ...

javascriptphpjqueryajaxtwitter-bootstrap

What is the secret behind Facebook's ability to keep the chat bar fixed at the bottom of the browser window?

I am curious to learn about the method Facebook uses to keep the chat bar at the bottom of the browser window even when we scroll through the page. ...

htmlcssfacebook

menu with dropdown options within dropdown options

I am experiencing an issue with creating a nested menu within my navigation header. Specifically, under the "Reports" section, I want to have two submenu items named "Global Shop" and "Ndustrios". When hovering over either of these submenus, additional men ...

htmlcssdrop-down-menu

Guide to transforming a vertical tabbed content panel into a responsive collapsible using media queries and jQuery

I am in the process of creating a new content navigation design that incorporates vertically stacked tabs to toggle hidden panels adjacent to the tabs. Unfortunately, this layout seems to encounter issues at narrower screen widths. Check out my work on Fi ...

javascriptjquerycssresponsive-designmedia-queries

How to style a webpage to be printed in CSS with A4 dimensions

Whenever I try to print my webpage, I encounter an issue where everything changes on the printout. I would like to be able to print a webpage that looks exactly like what is displayed on the screen. Here is an example of what I am looking for: enter imag ...

cssbootstrap-5

Switching images upon hovering in AngularJS

Looking to change images on hover in my Angular app, encountered site peculiarities making CSS solution impractical. Resorted to using ng-mouseenter and ng-mouseleave for image swapping instead. landing.jade img.share-button(src='images/btn_share.p ...

htmlcssangularjs

Increase value by 1 with the push of a button within two specified ranges using JavaScript

I am looking to create buttons that will increase the value of both the first and second range by 1 when pressed, as well as decrease the value of both ranges by 1 when pressed. Here is my code: function run(){ var one = document.getElementById("rang ...

javascripthtmlcss

Effectively implementing an event observer for dynamically loaded content

I want to set up an event listener that triggers when any of the Bootstrap 3 accordions within or potentially within "#myDiv" are activated. This snippet works: $('#myDiv').on('shown.bs.collapse', function () { //code here }); Howeve ...

javascriptjqueryajaxtwitter-bootstrap

tips for creating a mobile-friendly responsive button

I have been scouring the internet for a solution to this issue. Essentially, I am trying to position the button on the right side in desktop view. Here is an example: chrome view However, when the site is resized or viewed on mobile devices, the button sh ...

wordpresscssbuttoncss-float

Utilize Z-index to hide elements from view

Encountering an issue with hiding other div elements when one is visible. In the code snippet below, I aim to make Pacific Rim and World War Z disappear using z-index when Star Trek is visible. Here's my HTML code: <!doctype html> <html ...

htmlcssz-indexcss-transitions

Can you explain the concept of "cascading" within CSS?

Can someone kindly explain the specific definition of "Cascading" in Cascading Style Sheets (CSS)? I have heard conflicting perspectives on this topic, so I am seeking clarification here. Any examples to illustrate would be greatly appreciated. ...

cssterminologycss-cascade

Connecting a CSS file with an HTML document

Having an issue with my CSS. For instance, here is a snippet from my CSS file .readmore { font-style: italic; text-decoration: none; color: #509743; padding-left: 15px; background: url(../images/more.png) no-repeat 0 50%; } .readmore: ...

htmlcss

What are the specific files I should modify for HTML/CSS in my Ruby application?

My application was initially created with an introduction from: http://guides.rubyonrails.org/getting_started.html I am now looking to add some color and style through CSS. I have located the JavaScript and CSS files, but I am unsure which file is respons ...

javascripthtmlcssruby-on-railsruby

Another drop-down is hiding the bootstrap-select drop-down from view

What could be causing some parts of the first drop-down menu to be hidden by another drop-down menu below in the code snippet provided? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv= ...

javascripthtmltwitter-bootstraptwitter-bootstrap-3bootstrap-select

Lean/Tilt just the lower portion of the division

I have been experimenting with adding a unique slant to the bottom of a div. Progress has been made, as shown in the example below where I successfully applied the slant to some elements on the page. Currently, the slant is visible on both the top and bot ...

csswordpressskewrevolution-slider

Navigating the Bootstrap layout resulted in encountering two scrollbars

My HTML code for a todo application is displaying two scrollbars, can anyone suggest the correct Bootstrap layout for my application? <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div ...

htmlcsstwitter-bootstrapbootstrap-4

The div seems to be resistant to centering no matter the effort. Applying padding doesn't seem to be the solution, and even setting

I often come across this question but I can never seem to find the answer when it comes to padding or margin. It's strange that I'm having trouble properly centering the ul element within the div, especially considering that the div needs to be i ...

htmlcsshtml-listscenterpadding

Display additional javascript code for expanding a marquee

Currently, I am working on a stock ticker project using JavaScript. It's progressing well, and now I am focusing on adding a "show more" button to style the ticker. The button should be placed outside of the marquee. When clicked, it will expand the m ...

javascripthtmlcss