implementing a vertical separator in the main navigation bar

Is there a way to insert a vertical divider after each li element on the main menu? 

<ul class="nav navbar-nav">
    <li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a></li>
    <li><a href="#" > نبذه عنا </a></li>
    <li><a href="#"> اكادمية بوذيب للفروسيه </a></li>
    <li><a href="#"> اسطابلات بوذيب </a></li>
    <li><a href="#"> المركز الاعلامي </a></li>
    <li><a href="#"> اتصل بنا </a></li>
    <li><a href="#"> اكثر <i class="fa fa-bars"></i> </a></li>
    <li><a href="#">  </a></li>
</ul>

Check out the site that needs fixing here: the site

Also, here is an example of how I want the main menu to look like: the image

Any suggestions or help would be greatly appreciated.

htmlcss

Answer №1

If you want to add a vertical line between navigation items, you can achieve this by using the <pseudo:before> element. Even if the nav items have more height than the line, this method can be effective.

.navbar-default .navbar-nav>li>a:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 1px;
    background: #fff;
    height: 30px;
    right: 0;
    top: calc(50% - 15px);
}
.navbar-default .navbar-nav>li:last-child>a:after,
.navbar-default .navbar-nav>li:first-child>a:after{
    display:none;
}

Answer №2

Here is a new suggestion

ul li{
  float:right;
  list-style:none;
  padding:0 10px;
  border-left:2px solid black;
}
ul li:last-child{
  border:none;
  }

a{
  text-decoration:underline;
}
<ul class="menu nav">
        <li><a href="#"><i class="fa fa-star"></i> <span class="sr-only">(highlighted)</span></a></li>
        <li><a href="#" > About Us </a></li>
        <li><a href="#"> Buddhip Equestrian Academy </a></li>
        <li><a href="#"> Buddhip Stables </a></li>
        <li><a href="#"> Media Center </a></li>
        <li><a href="#"> Contact Us </a></li>
        <li><a href="#"> More <i class="fa fa-bars"></i> </a></li>
      </ul>

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

"Using Selenium in Python to navigate Google's search results and view the

Hello, I am new to using selenium and I have a specific task in mind. I would like to scrape the address search results from Google that are displayed on the sidebar column. I have successfully managed to use selenium to conduct searches on Google and land ...

pythonhtmlseleniumgoogle-search

Dynamic Rendering of Object Arrays in Table Columns using JavaScript

In the process of developing an appointment slot selection grid, I have successfully grouped all appointments by dates. However, I am facing challenges in displaying this array of Objects as a clickable grid with columns. The current output can be viewed h ...

javascripthtmlgrid-layout

Dynamic reloading of a div with form data using jQuery's AJAX functionality

I am currently developing an online visitor chat software using PHP and MySQL. My goal is to load the page when the submit button is clicked. Submit Button ID: send Visitor ID: vid Chat ID: cid Below is the snippet of code for an Ajax request that I hav ...

javascriptphpjqueryhtmlajax

The navbar does not dictate the views

Greetings lovely individuals I've been grappling with this issue for a while now and it seems I can't quite crack it on my own... I'm hopeful that you can assist me. My objective: A functioning navigation bar controlled by PHP in an MVC pat ...

phphtmlmodel-view-controllerbootstrap-4

Dynamic JavaScript Calculations Based on User Input in Real Time

I am in the process of creating a dynamic calculator that updates in real-time based on user input from a form. I have successfully implemented this feature using a sample div, but I am encountering difficulties when attempting to display the total inside ...

javascriptjqueryhtmlkeyup

Switch out the rowspan attribute in HTML for a CSS alternative

Hello there, I've been experimenting with replacing my table layout with divs and CSS, but I'm struggling to find a way to replicate the behavior of the rowspan attribute. Here is the original code snippet: <table> <tr> <td> ...

csshtml-table

The HTML 5 Validation is unsuccessful due to the presence of the "Attribute addthis:url not allowed on element a at this point." error

I am currently facing an issue on my MVC4 Project web page where I have implemented the ShareThis plugin to display share count for various posts. The code snippet looks like this: @{ string strShareThisURL = "addthis:url=\"" + mainURL +" ...

jqueryhtmlasp.net-mvc-4

Need to swiftly modify values of css attributes?

Here is a snippet of the code I am working with: <div></div> <button> Go </button> div { width: 50px; height: 50px; border: 1px solid #ccc; } var bgs = ['red', 'blue', 'yellow', 'green&apo ...

javascriptjquerycss

How to make QWebView background translucent

My goal is to make the background of a QWebView element transparent. +---------------------------+ | x | Window title | <<< Hidden borders and title bar +---------------------------+ view->setWindowFlags(Qt::FramelessWindowHint); | ...

c++htmlcssqt

Exploring Vue and Webpack's tree shaking functionality, side effects management, and its impact on CSS: Loading unused component CSS

We are currently grappling with the challenge of effectively implementing tree shaking for CSS within Vue Single File Components using Webpack. Within our package.json file, we have specified: "sideEffects": ["*.css", "*.less","*.vue"], which appears to b ...

cssvue.jswebpackvuejs2

Incorporating components into Vue while utilizing Flask poses a challenge

Currently, I am working on a project that involves Flask and Vue. I am attempting to add a carousel to my website, but I am running into difficulties with creating and importing components for Vue when following tutorials. Here is my current file structure ...

pythonhtmlvue.jsflaskimport

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Just starting out with Vue and diving into the world of CSS3! I'm currently working on a component that you can check out here: https://codesandbox.io/s/yjp674ppxj In essence, I have a ul element with relative positioning, followed by a series of di ...

javascriptcssvue.jsvuejs2vue-component

I am struggling to create a responsive HTML/CSS/Bootstrap file that can adapt to all screen sizes

Exploring the world of web development for the first time and seeking guidance on how to make file elements responsive to accommodate any screen size or resolution. Assistance would be greatly appreciated! Here's a snippet of my code: `\<!DOCT ...

htmltwitter-bootstrapwebresponsivebootstrap-5

Customizing the footer on various pages using Footer.php

For the past week, I've been working on updating our mobile site and have encountered an issue with the footer. It loads perfectly fine on the home page but crashes when viewing a regular page. Strangely enough, both pages are using the same footer.ph ...

csswordpress

Creating dynamic HTML elements for each section using JavaScript

Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button? I attempted to create an event for each button to add a task for the corresponding div of that particular section, ...

javascripthtmldomaddeventlistener

AngularJS fails to prioritize the following element

Here is my HTML code: <div ng-app="app"> <form> <div class="form-group"> <label >Username</label> <input focus type="text" class="form-control" id="loginUserName" ng-model="userForm.crn" required/> ...

javascriptjqueryhtmlcssangularjs

Having difficulty accessing the value of a table td element in HTML using a jQuery selector

When creating a table, I utilize ng-repeat to generate table rows. Whenever the dropdown changes, a function is triggered which applies certain conditions. Based on these conditions, an object is added to an array that is bound to a scope variable. Here i ...

javascriptjqueryhtmlangularjsangular

The XML request fails to retrieve any output from the PHP script

I am seeking tools to enable the calling of .php from .html files. Here is an issue: while this example successfully works in a .php file: <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> &l ...

javascriptphphtmlxmlhttprequest

Troubleshooting problem with Z-Index conflict in Flash animation

I am facing an issue with two HTML divs - one containing a flash movie and the other simple text. I want to place the textual div on top of the flash movie div, but no matter how I set their positions in CSS or adjust their Z-Index values, the text keeps ...

javascripthtmlcssflashxhtml

Fixed position halting in a specific area

I have a fiddle where the black box is fixed on the page, but it overlaps the map when scrolling. I want to stop the black box from overlapping the map. How can I achieve this? CSS: .item{ background:#eee; padding:10px; width:50%; margin-bottom:15px;} .n ...

htmlcss