Separate Your Navbar with Bootstrap 4 Separators

I'm facing a challenge in adding separators within a navigation bar between the navigation items. I am unsure how to evenly space out the padding on these separators next to each navigation item.

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

Another issue I encountered is that the separators are also displaying in the toggle navigation bar when it collapses. I have attempted to remove them without success.

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

If anyone has a more effective method for creating separators, I would greatly appreciate the help.

Below is the code snippet:

.navbar-nav > li > a::after {
    content: "|";
    padding: 0 5px
}
<div class="collapse navbar-collapse" id="navbarResponsive">
  <!--
  1) collapse - class dedicate to a given alement
  2) navbar-collapse:  show elements to bootstrap which belong to navbar, then use function - collapse
  -->
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item active">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item active">
      <a class="nav-link" href="#">Services</a>
    </li>
    <li class="nav-item active">
      <a class="nav-link" href="#">Registration</a>
    </li>
    <li class="nav-item active">
      <a class="nav-link" href="#">Tips</a>
    </li>
  </ul>
</div>

htmlcssbootstrap-4

Answer №1

Perhaps applying a border-right CSS style to your nav-items could be the solution, and you can deactivate it at a specific break-point (MD is the selected breakpoint in the following example).

.border-md-right {
  border-right: 1px solid silver;
}

@media (max-width: 768px) {

  .border-md-right {
    border-right: none;
  }

}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active border-md-right">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item active border-md-right">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item active border-md-right">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item active border-md-right">
        <a class="nav-link" href="#">Registration</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Tips</a>
      </li>
    </ul>
  </div>
  
</nav>

Answer №2

@Shidersz suggestion appears to be effective. Another alternative is to avoid adding an extra class to each li. However, this approach may become more challenging if dealing with a dynamic menu where the class needs to be added to every element except the last one!

.navbar-nav .nav-item:not(:last-child) {
   border-right: 1px solid silver;
}

@media (max-width: 768px) {
  .navbar-nav .nav-item:not(:last-child) {
    border-right: none;
  }
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Registration</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Tips</a>
      </li>
    </ul>
  </div>
  
</nav>

Answer №3

This solution was effective for me with Bootstrap 4

.navbar-nav > li > a::after {
    content:'|';
    padding-left:10px;
    @media (max-width: 767px) {
        content: none;
        padding-left:0;
    }
}
 .navbar-nav > li:last-child > a::after {
         content:none;
}

Answer №4

Implementing Bootstrap 5 functionality

<nav class="navbar navbar-expand">
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">Disabled</a>
            </li>
        </ul>
    </div>
</nav>

Styling with CSS

.navbar-nav > li > a::after {
    content: '|';
    padding-left: 15px;
}

.navbar-nav > li:last-child > a::after {
    content: none;
}

Answer №5

Exclusively using Bootstrap 5 with no extra styles:

<li class="nav-item"><hr class="d-lg-none" /><span class="nav-link d-none d-lg-block mx-2">|</span></li>

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

Organizing DIVs upon website initialization

My website features a layout with three columns: <div id="column1"></div> <div id="column2"></div> <div id="column3"></div> I currently have 3 divs on the webpage: <div id="1">aaa</div> <div id="2">b ...

javascriptjqueryhtml

Switching views in AngularJS by using a controller to control the content displayed in the

My JavaScript web app utilizes AngularJS to simplify tasks, but I've encountered an issue. I'm trying to change views from an ng-controller using $location.path, but for some reason, the view isn't updating even though the path in the $loca ...

javascripthtmlangularjsng-viewoffice-app

Display only the highest image in the picture carousel using Jquery

My goal is to create a simple image slider using HTML, CSS, and Jquery. However, when I try to move it left by 750px, only the topmost image moves and the rest of the images are not displayed. It seems like all the images are moving at once instead of jus ...

jqueryhtmlcss

Include a query parameter each time a page is added to bookmarks

Is there a way to automatically add a query parameter to a page URL when bookmarked using Chrome? For example, if I bookmark https://www.example.com, can it be saved as https://www.example.com/?bookmarked? I'm thinking I might need to use JavaScript ...

javascripthtmltypescriptgoogle-chromebookmarklet

In JavaScript, implement event listeners exclusively on the main container and its immediate child elements

Is there a way to target just the main container and its second child elements for an event? Specifically, targeting id="container" and all elements with class="secondChild" Currently, I have a listener attached to all elements inside ...

javascripthtmladdeventlistener

Create a copy of a JQuery slider

Hello there, I'm a first time poster but have been reading for a while now. I've been working on creating a simple jQuery Slider and I'm facing an issue... I want to create a slider that utilizes minimal jQuery and can be easily duplicated o ...

jqueryhtmlcssslider

Changing Location of Carousel in Bootstrap

Recently, I have been working with Bootstrap and have encountered a problem with the carousel. I have placed carousel images below my navbar, but there seems to be a gap between the navbar and the carousel image. I want the image to be right below the navb ...

jqueryhtmlcsstwitter-bootstrap

Guide to displaying a confirmation prompt in c# programming

I need to create a confirmation window similar to confirm() in JavaScript that will pop up when a button is clicked. If the user selects "YES", I want to execute some C# code. How can I achieve this? EDIT: here is the code snippet that I have: SCRIPT: & ...

c#htmlasp.net

The hierarchical structure in the DOM that mirrors an HTML table

While working on code to navigate the DOM for a table, I encountered an unexpected surprise. The DOM (specifically in FF) did not align with my initial expectations. Upon investigation, it appears that FF has automatically inserted a tbody along with sever ...

javascripthtmldom

Can a plugin be executed as a test?

I am currently using HTMLhint, however, I would like to have it run as a test rather than just through the command line plugin. Is there a way to achieve this and if so, how can I do it? I have searched online but haven't been able to find a solution ...

javascripthtmlunit-testingtesting

.mouseleave() triggers when exiting a designated boundary area

I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...

javascriptjqueryhtmlcss

The arrangement of columns and floating images along with the surrounding white spaces

There are 3 columns, each sized at 33% with images of varying heights inside. When viewed on a device the size of an iPad, I want to change the column sizes to be 50%. However, when I do this, the third column appears in the middle bottom of the top two co ...

htmlimageresponsive-designcss-floatgallery

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...

javascripthtmlcssdojo

Seeking a JavaScript tool specialized in compressing POST data?

Currently working on a chrome extension that sends HTML strings to a server using POST requests. Interested in compressing these large strings before sending them. Wondering if there are any JavaScript libraries that can help with this? ...

javascripthtmlcompression

Dynamic fields added using JavaScript are not recognized by PHP

I have a MySQL database where orders are stored along with various activities. My PHP/HTML page retrieves these activities when an order is clicked and allows users to modify them using a form. Upon submission, another PHP file updates the database by loop ...

javascriptphphtmlmysql

Difficulty linking CSS to HTML in a Flask web application

My HTML/CSS file is pretty straightforward: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta name=&quo ...

pythonhtmlcsspython-3.xflask

Creating a div that functions as a scrollbar controller

I am in search of a unique way to customize the scrolling functionality on my application, resembling more of a navbar that scrolls. However, I have not been able to find any existing plugins that meet my specific requirements. My inquiry includes: Whic ...

javascriptjqueryhtmlscrollbarnavigationbar

Can you please adjust the image to the right side?

I'm having trouble aligning the image to the left in my code. It always seems to leave a margin on the sides that I can't figure out how to get rid of. https://i.sstatic.net/kKwII.jpg This is the snippet of my code: <section class="conta ...

htmlsass

Breaking Free from Bootstrap Grids

I have a row with two Bootstrap columns - one wide and tall, the other short and narrow https://i.sstatic.net/u7WAf.png However, for mobile devices (targeted below lg), I want to change the column order to split into three sections Photo Consent Organis ...

htmlcssbootstrap-5

Ways to conceal or deactivate button controls on videojs?

I am building an application using video.js and Vue. I am looking for a way to hide or disable certain controls like the play button, playback rate, and make the progress bar read-only. In the video.js documentation, I found that using controls: false hi ...

javascripthtmlvue.jsvideo.js