Nav links in Bootstrap are seriously misplaced

My navigation bar, created with Bootstrap 4 CSS, consists of 3 links and a brand logo.

Despite my expectations of all elements aligning properly, they appear disorganized and not in line.

Please see the current layout here: https://i.sstatic.net/OeKcf.png

Below is the code I am currently using:

<nav class="navbar navbar-fixed-top">

  <!-- Toggle Button -->
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰
  </button>

  <!-- Nav Content -->
  <div class="collapse navbar-toggleable-xs" id="nav-content">
    <a class="navbar-brand" href="#">Logo</a>
    <ul class="nav navbar-nav">
      <li><a href="#search">Search <i class="fa fa-search" aria-hidden="true"></i></a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right pull-md-right pull-lg-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Log In</a>
      </li>
    </ul>
  </div>

</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">
    <p class="text-center">Play button will go here when video is implemented</p>
    <div class="col-xs-12 text-center">
      <a class="btn btn-primary btn-lg" href="#" role="button">Earn now! &raquo;</a> 
    </div>
  </div>
</div>

The font I am using is Proxima Nova. This issue has never occurred before, any suggestions or ideas?

htmlcsstwitter-bootstrapalignmenttwitter-bootstrap-4

Answer №1

Make sure to include the classes nav-item and nav-link when creating the Search link...

  <ul class="nav navbar-nav">
      <li class="nav-item"><a href="#search" class="nav-link" >Search <i class="fa fa-search" aria-hidden="true"></i></a>
      </li>
  </ul>

Link to example code

It's important to note that Bootstrap 4 is currently in alpha stage, meaning it's still a work in progress.

Answer №2

Here's a solution for you: I've included the pull-md-left class to the first navbar-nav.

<nav class="navbar navbar-fixed-top">

  <!-- Toggle Button -->
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰
  </button>

  <!-- Nav Content -->
  <div class="collapse navbar-toggleable-xs" id="nav-content">
    <a class="navbar-brand" href="#">Logo</a>
    <ul class="nav navbar-nav pull-md-left">
      <li class="nav-item">
         <a href="#search" class="nav-link">Search <i class="fa fa-search" aria-hidden="true"></i></a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right pull-md-right pull-lg-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Log In</a>
      </li>
    </ul>
  </div>

</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">
    <p class="text-center">Play button will go here when video is implemented</p>
    <div class="col-xs-12 text-center">
      <a class="btn btn-primary btn-lg" href="#" role="button">Earn now! &raquo;</a> 
    </div>
  </div>
</div>

Answer №3

Did you experiment with using just one 'ul class="nav navbar-nav" ' for your navigation bar and adding the class "pull" directly to your 'li' tags? :)

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

Guide to adding up the radio button values with Javascript

The tutorials I have reviewed include: How might I calculate the sum of radio button values using jQuery? How to find a total sum of radio button values using jQuery/JavaScript? How might I calculate the sum of radio button values using jQuery? Unfortu ...

javascriptjqueryhtml

I am having trouble displaying SASS styles in the browser after running webpack with node

In my current project for an online course, I am utilizing sass to style everything. The compilation process completes successfully without any errors, but unfortunately, the browser does not display any of the styles. The styles folder contains five file ...

javascriptcsswebpacksass

Can someone help me extract the text from the line directly beneath the <span> tag in HTML code, but only if it has a certain class and specific content

I am currently developing a script to extract product specifications from an e-commerce website. I have a list of URLs that lead to different products, and my goal is to scrape the specific specs required for each item. Although I have been using ParseHub ...

pythonhtmlweb-scrapingbeautifulsoupparsehub

Troubleshooting a Dysfunctioning Character Counter Feature in a JavaScript Input Field

I've been working on a fun little project to practice my JavaScript skills - a plate calculator. Here's the gist: you enter your name, and each letter costs $5, so the total cost of the plate is the length of your name multiplied by $5 (this pro ...

javascripthtmlcss

Allow only specific HTML tags using regular expressions

I'm currently working on a regex pattern to whitelist specific HTML tags. /<(\/)?(code|em|ul)(\/)?>$/ However, there are some scenarios where this regex is not working as intended: <em style="padding: 10px"> To address this i ...

javascripthtmlregex

Creating a character jump animation on an HTML5 canvas

While following a tutorial on creating character animations, I encountered an issue. The tutorial, located at , made it easy to make the character move left (the right movement was already implemented). However, I am struggling with how to animate the char ...

javascripthtmlanimationcanvas

Importing CSS with Node Sass using npm

Instead of inlining css within sass, I attempted to utilize the npm package Node Sass CSS importer. Unfortunately, I am struggling to get it to function properly. I typically use npm as my build tool: "build:css": "node-sass some_path/style.scss some_pa ...

cssnode.jsnpmsass

Guide to changing CSS style dynamically using AngularJS

<div style="width: 50px !important"> I am looking for a way to dynamically set the pixel number using angularjs. The final width should be calculated based on a base pixel width as well. How can I make this happen? <div ng-style="{{width: (model ...

javascripthtmlcssangularjs

What could be causing the submit action to not work when using PHP's isset function?

This is an HTML registration form with a PHP action triggered by the submit button. <html> <head> <title>Registration Form</title> </head> <body> <h1 align="center"> REGISTRATION FORM </h1> <form ...

phphtmlformsactionisset

The timer is malfunctioning

I am new to JavaScript and looking to create a simple countdown. I came across this script: http://codepen.io/scottobrien/pen/Fvawk However, when I try to customize it with my own settings, nothing seems to happen. Thank you for any assistance! Below is ...

javascriptjqueryhtmlcountdown

Designs created with shapes using HTML, CSS, and JavaScript

I've been given a challenge to reproduce the image shown below using only HTML, CSS, and JS - without utilizing any image files. Initially, I thought about creating the shapes with HTML elements and CSS, but I realize this might not be the best approa ...

javascriptjquerycsshtml

How does the 'v-show' command cause unexpected changes to the normal layout of HTML elements (such as the position of divs)?

I'm looking to create unique custom components, similar to the one shown in this image: https://i.sstatic.net/MLj1a.png Just to clarify, this is a component from an element(). When I hover over the picture, it displays a translucent background. So ...

javascripthtmlvue.js

Using PHP to nest a table within HTML and populate it with numbers ranging from 1 to 100

I am struggling with a practice question that involves creating a table using PHP nested in HTML. I need some help fixing it and understanding where I went wrong. The task is simple: generate numbers from 1 to 100 in a table, with each row containing 10 n ...

phphtmlmysql

The issue of Firefox background image flickering is persistent when multiple instances are open and the background-size

I am facing an issue with background images on my webpage. I have two elements that share a background image and are contained within 3 column width containers using Bootstrap. In the second element, I have set the background to be 90% in width, making it ...

htmlcssfirefoxtwitter-bootstrap

The radial gradient in d3.js does not properly affect paths

My goal is to create a radial gradient on my path element, but for some reason the radial gradient does not apply correctly. Can anyone help me troubleshoot this issue? Below is my updated code: // Define the canvas / graph dimensions var margin = {top: ...

javascriptcssd3.js

Steps to align table next to the paragraph tag

I am facing an issue trying to align a table inline with the p tag in my HTML code. I have attempted to make minimal changes to achieve this, but it is not working as expected. Here is the code I have tried: <p>ABCD</p> <table style = displ ...

htmlcss

Utilize a counter to iterate the name repeatedly

echo "<td>".'<input type="text" name="date_from" class="datepicker"/>'."</td>"; Is there a way to utilize a counter to repeat the name attribute and then store it using $_POST[]? ...

phphtmlcounter

After the form is submitted, the script is activated once more

Whenever I click the button that triggers an AJAX POST script multiple times, the script gets activated repeatedly. This results in items being created more than once. How can I solve this issue? $(document).delegate(".add_page_submit","click",fu ...

jqueryajaxhtmlpost

Solving layout issues / Techniques for determining element heights

This new question is in relation to my previous one: How to position relative elements after absolute elements I have updated the JsFiddle from that question to better represent my current HTML, which I unfortunately do not have a URL for at the moment. Y ...

javascripthtmlcss

The left and right DIVs are not automatically adjusting to the height of the container

I am currently working on a grid layout consisting of 9 div tags, creating 3 rows with 3 divs in each row. Within this grid, each div is supposed to have a background image, except for the second div in the second row. My main challenge lies in getting th ...

css