Is there a way to include a backslash "/" between each element in a bootstrap navigation bar?


I am having trouble inserting a "/" between each item in my Bootstrap 3 navbar.

It seems like the issue lies within my CSS code.

I attempted to use this block of CSS, but it places the "/" above the navbar item:

.navbar-custom .navbar-links-custom li:before{
    content: " / ";
}

This is how the HTML looks:

<nav class="navbar navbar-default navbar-custom" data-spy="affix" data-offset-top="50">
    <div class="container">
        <div class="row">
            <div class="navbar-header navbar-header-custom">
                <button type="button" class="navbar-toggle collapsed menu-icon" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul id="menu-main-menu" class="nav navbar-nav navbar-right navbar-links-custom">
                    <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-41 current_page_item menu-item-43"><a href="#">Home<span></span></a></li>
                    <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="#">About<span></span></a></li>
                    <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="#">Services<span></span></a></li>
                    <li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-48 dropdown submenu"><a href="#">Blog<span></span></a>
                        <ul class="dropdown-menu">
                            <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="https://ecohotels-landingpage-jafar70.c9users.io/blog-grid/">Blog Grid</a></li>
                            <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="http://webpentagon.com/demo/themeforest/wordpress/specialists/lorem-ipsum-dolor/">Blog Post</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-49" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-49 dropdown submenu"><a href="#">Pages<span></span></a>
                        <ul class="dropdown-menu">
                            <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="https://ecohotels-landingpage-jafar70.c9users.io/about-team/">About Team</a></li>
                            <li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="http://webpentagon.com/demo/themeforest/wordpress/specialists/404/">404</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="https://ecohotels-landingpage-jafar70.c9users.io/contact/">Contact<span></span></a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

You can view the Codepen example here.

htmltwitter-bootstrapcsstwitter-bootstrap-3

Answer №1

To adjust your CSS accordingly and ensure that the "/" is properly positioned, you can use the following code snippet with absolute positioning:


.navbar-custom .navbar-links-custom li {
  padding: 0 5px 0 5px;
  position: relative;
}

.navbar-custom .navbar-links-custom li:before{
    content: " / ";
    position: absolute;
    right: 0;
    top : 15px;
}

Check out the updated code on Codepen here: https://codepen.io/anon/pen/LeKjqV

Answer №2

Use the following code snippet for styling the a tag

.navbar-custom .navbar-links-custom li a:after{
    content: " / ";
}

.navbar-custom .navbar-links-custom li:last-child a:after{
    display: none;
}

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

Setting up a Content Security Policy to allow fetching images from both remote URLs and local sources

My Content-Security-Policy meta configuration looks like this: <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-eval' 'unsafe-inline'; img-src *; style- ...

htmlangularcontent-security-policy

What is the best way to make CSS webkit-scrollbar compatible with HTML object tags?

I'm attempting to customize a scrollbar using CSS with the -webkit-scrollbar property. Below is the code I am using: index.html <html> <head> <style> object { overflow: scroll; width: 300px; ...

htmlcss

Incorporate the stylish PayPal icon from Font Awesome into the PayPal code

I'm experimenting with adding the font awesome paypal icon <i class="fa fa-paypal" ></i> before the PAY WITH PAYPAL text on my button. You can see a similar setup on this page with the shopping cart icon <i class="fa fa-shopping-cart"& ...

htmlpaypalfont-awesome

Tips for stretching the div#header2 across the full length of div#header1

Code: #header1{width:100%;} #header2{ position: absolute; top: 0px; left: 0px; width: 75px; height: 72px; background: url("./image.png"); background-repeat: repeat-x; background-position: -10px -180px; } <div id="heade ...

htmlcss

The layout of HTML emails appears to be malfunctioning on Outlook

Having trouble with my HTML email format not displaying properly in Outlook. The code includes Angular and Bootstrap CSS. I've even added inline CSS specifically for Outlook, but the table stretches to full screen when viewed in Outlook. I've tr ...

htmlcssangularjsemailoutlook

Facing issue with React Native Flip Card functionality not working properly when trying to flip

I am currently working on developing a flip card game using GestureFlipView for the flip card animation. My goal is to display these flip cards in a 3X3 grid by utilizing components from React Native. However, I have encountered an issue where the cards ar ...

javascriptandroidcssreact-nativeanimation

Encountering an Error with Polymer 1.0 and Django: Unresolved Reference to KeyframeEffect

I've been experimenting with Polymer 1.0 in combination with django and snapdragon. Although I've managed to render the elements successfully, I've hit a roadblock when it comes to animations. The code I'm using is almost identical to t ...

javascripthtmldjangopolymer-1.0

The jQuery regular expression for validating US postal codes is not functioning correctly

After implementing the code snippet provided, I noticed that no alert message is being displayed when non-numeric values are entered into the Zipcode field. Can someone please help me troubleshoot this issue? $("input:text[name='address_1[zip]&apos ...

javascripthtmljqueryregexfrontend

A guide on defining the width of an element within a flex container when it overflows

Here is the code snippet I have: .divA { background: red; width: 500px; display: flex; flex-direction: row; overflow-y: scroll; } .epi { width: 50%; background: blue; } <div class="divA"> <div class="epi"> <h1>dsds ...

css

Ensuring scroll position remains fixed post screen rotation in HTML/Javascript

Is there a foolproof method to retain the scroll position in an HTML document following a screen rotation? While this issue is specifically in a Cocoa Touch UIWebView, it seems to be prevalent across different platforms. The standard practice appears to re ...

javascripthtmluiwebview

Ways to determine the number of overlapping elements and adjust their widths

My layout conundrum involves 3 buttons within a flexbox placed in a single table cell. I am trying to adjust the width of each button so that they collectively fill the horizontal space as much as possible. The issue arises when the buttons overlap and the ...

htmlcssbootstrap-4flexbox

Having trouble identifying the source of the margin-right styling being used

I'm facing a perplexing issue with the CSS for my sidebar (#primary) on my website. Even though I haven't specified any margin for the sidebar, it is somehow getting a margin-right of 605px. In trying to solve this, I experimented with relative ...

htmlcss

IE11 retains radio button selection even after page reload

I am facing an issue on my webpage where I have implemented radio buttons for filtering a list. ALL (default selected with checked='checked') MATCHED REST <input type="radio" value="ALL" name="options" class="radioStyle" checked autocompl ...

htmlinternet-explorer-11

Adding paragraph alignment to a Pug template: A step-by-step guide

Currently, my code looks like this: doctype html html head title= title style. body { font-family: Verdana; font-size: 13px; background: #42f495 } body h1 ...

node.jshtmlexpresspug

Is there a way to remove this specific element from an inherited hyperlink?

My website can be found at whensayfeed.meteor.com. Each post on the site is enclosed within an <a></a> element. The heart symbol on the right side of each post is intended to be a "like button" that users can click on. However, because it is ...

javascripthtmlcss

Displaying Dates in an Express Application using EJS

I have a MySQL table with a column containing date data. I am building a webpage to display this data in a more user-friendly way. Currently, the displayed result looks like this: https://i.sstatic.net/lGamr.png I would like the dates in the column to ...

javascripthtmlnode.jsexpressejs

Styling radio buttons with customized CSS borders

I'm attempting to style some radio buttons with a bold red border, but I'm having trouble getting it to display correctly in the latest versions of Firefox and Chrome. It works fine in IE9/IE8. For each input element that is required on my form, ...

css

Which is more recommended to use in AJAX (XMLHttpRequest) - eventListener or readyStateChange method?

As I revisited a video from WWDC12 discussing advanced effects with HTML5, I couldn't help but notice that for the demo they utilized req.addEventListener("load",callback,true) instead of the usual onreadystatechange. This made me wonder: what differ ...

javascriptajaxhtml

Utilizing flex containers to strategically position boxes

My goal is to achieve a design similar to the image below: https://i.sstatic.net/286GX.png I have been advised to use Flexbox for this design. Despite trying various approaches, I am struggling to maintain consistent box sizes. I have a dataset called da ...

htmlcssvue.jsvuejs2

Option in the dropdown menu will not appear on the user interface if the data contains the "&" sign

Below is an example dataset I'm using for my dropdown selection: [ { "value":"example1", "name":"example name 1" }, { "value":"example2", "name":"example & name 2" ...

htmlangularjsuser-interfacehtml-select