Putting a | in the navigation bar

Question

Putting a | in the navigation bar

Could use some assistance here as I'm struggling to add a | between 'About Us' and 'Login' in my code. Any tips on how to achieve this? I've checked other posts but can't seem to apply it correctly to my specific lines of code.

HTML

color:rgba(152,226,80,0.6); font-family: 'Bahnschrift Regular';" title="This Header is rendered by /app/_layout/site-header/site-header.component.html">
   <div id="logo">
     <a href="/index.html">
     </a>
 </div>
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" routerLink="/" style="color:White;" >Home</a>
          </li>
          <li class="nav-item">            
            <div class="dropdown">
           <li class="dropbtn">Services</li>
           <div class="dropdown-content">
            <a href="/carmaintenance" style="text-align:center">Car Maintenance
              ______________________
            </a>
            <a href="/gogreenseminars" style="text-align:center">Go Green Seminars
              ______________________
            </a>
            <a href="/microgridresources" style="text-align:center">Microgrid Resources
              ______________________
            </a>
            <a href="/gardeningtogether" style="text-align:center">Gardening Together
              ______________________
            </a>
            <a href="/volunteering" style="text-align:center">Volunteering and Activism
              ______________________
            </a>
            <a href="/recyclingefforts" style="text-align:center">Recycling Efforts
              ______________________
            </a>            
            <a href="/inhousevegancafe" style="text-align:center;">In-House Vegan Cafe              
            </a>    

            </div>
            </div>            
          <li class="nav-item">
            <a class="nav-link" routerLink="/dashboard"style="color:White;">Membership Plans</a>
          </li>          
          <li class="nav-item">
            <a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/login"style="color:White">Login</a>
          </li>
        </ul>
      </div>
    </nav>

CSS

/* Position the navbar container inside the image */
/*.container {
  position: absolute;
  margin: 20px;
  width: auto;
  top:3%;
  left:1%;
}
*/

/* The navbar */
.topnav {
  overflow: hidden;
  background-color: rgba(152,226,80,0.6);

}

/* Navbar links */
.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;


}
.nav-link 
{
  /*background-color:;*/
  font-weight: bolder;
  color: white;  
  font-size: 125%;
  align-items:center;
  text-align:center;
  float: left;
  display: block;   
  margin-left: 65px;
  margin-right:5px;

}        
.navbar {
  float: left;
  width:66%;
  height:8%;
  opacity:1;
  border-radius:15px 0px 0px 15px;
  padding-left: 0%;
  top:3%;
  left:1%;  

}

.topnav a:hover {
  background-color: #ddd;
  color: black;  
}
/* Dropdown Button */
.dropbtn {
  background-color: rgba(152,226,80,0.0);
  color: white;
  padding: 8px;
  font-size: 125%;
  border: none;
  font-weight:bolder;
  margin-left:65px;
  margin-right:5px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;  
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute; 
  min-width: 90px;
  box-shadow: 0px 0px 0px 0px rgba(152,226,80,0.0);
  z-index: 1; 
  text-align:center;
  padding-left:20px;
  padding-top:13px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #FFFFFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  background-color : rgba(152,226,80,0.6);
  font-weight:bolder;
  margin-top: -10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* Change color of dropdown links on hover */
//.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
//.dropdown:hover .dropbtn {background-color: #3e8e41;}

@font-face {
    font-family: 'Bahnschrift Regular';
    font-style: normal;
    font-weight:bolder;
    src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 1.woff') format('woff');
}

Appreciate any help or guidance you can provide. Thank you in advance!

html css angular bootstrap-4

Answer 1

Answer №1

To achieve this effect, you have a couple of options. One way is to apply a border-left to the last li element using the :last-child pseudo-element, or you can insert content before each li using the :before pseudo-element. Keep in mind that when adding pseudo-elements, they are inserted as the first child of the selected element, which may impact other styling considerations.

EDIT - As mentioned earlier, only li elements should be direct children of a ul element. To ensure proper HTML structure, make sure any additional elements like divs or dropdowns are nested within an li instead of directly under the ul parent.

Credit to @dale landry for providing the initial code framework below :)

.flex-box {
  display: flex;
}

li, .nav-item {
  text-decoration: none;
  list-style-type: none;
  padding: 2px 12px;
  color:black;
}


.nav-item:last-child {
  border-left: solid 1px black;
}

<div>
  <ul class="flex-box">
    <li class="nav-item">
      <a class="nav-link" routerLink="/">Home</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" routerLink="/services">Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/about">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/login">Login</a>
    </li>
  </ul>
</div>

You can also achieve the desired divider effect by using a :before pseudo-element:

.nav-item:last-child {
  position: relative
}
.nav-item:last-child:before {
  position: absolute;
  content: "|";
  left: 0;
  color: #d4d4d4;
}

.flex-box {
  display: flex;
}

li, .nav-item {
  text-decoration: none;
  list-style-type: none;
  padding: 2px 12px;
  color:black;
  position: relative
}

.nav-item:last-child:before {
  position: absolute;
  content: "|";
  left: 0;
  color: black;
}

<div>
  <ul class="flex-box">
    <li class="nav-item">
      <a class="nav-link" routerLink="/">Home</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" routerLink="/services">Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/about">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/login">Login</a>
    </li>
  </ul>
</div>

Another approach is to add an element that acts as a divider and spans the full height of the li element:

.nav-item:last-child {
  position: relative
}
.nav-item:last-child:before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0; 
  width: 1px;
  background-color: #d4d4d4;
}

If you prefer not to rely on :last-child, you can assign a specific class to the last li item for the same effect:

      <li class="nav-item login-link">
        <a class="nav-link" routerLink="/login" style="color:white">Login</a>
      </li>

      //css
      .login-link {
         border-left: solid 1px #d4d4d4;
      }

To create dividers between every li except the last one, you can use the adjacent sibling combinator "+" in CSS:

.nav-item + .nav-item {
  border-left: solid 1px #d4d4d4;
}

Alternatively, you can achieve this using a :before pseudo-element:

.nav-item {
  position: relative
}
.nav-item + .nav-item:before {
  position: absolute;
  content: "|";
  left: 0;
  color: #d4d4d4;
}

Answer 2

To achieve this effect, you have a couple of options. One way is to apply a border-left to the last li element using the :last-child pseudo-element, or you can insert content before each li using the :before pseudo-element. Keep in mind that when adding pseudo-elements, they are inserted as the first child of the selected element, which may impact other styling considerations.

EDIT - As mentioned earlier, only li elements should be direct children of a ul element. To ensure proper HTML structure, make sure any additional elements like divs or dropdowns are nested within an li instead of directly under the ul parent.

Credit to @dale landry for providing the initial code framework below :)

.flex-box {
  display: flex;
}

li, .nav-item {
  text-decoration: none;
  list-style-type: none;
  padding: 2px 12px;
  color:black;
}


.nav-item:last-child {
  border-left: solid 1px black;
}

<div>
  <ul class="flex-box">
    <li class="nav-item">
      <a class="nav-link" routerLink="/">Home</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" routerLink="/services">Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/about">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/login">Login</a>
    </li>
  </ul>
</div>

You can also achieve the desired divider effect by using a :before pseudo-element:

.nav-item:last-child {
  position: relative
}
.nav-item:last-child:before {
  position: absolute;
  content: "|";
  left: 0;
  color: #d4d4d4;
}

.flex-box {
  display: flex;
}

li, .nav-item {
  text-decoration: none;
  list-style-type: none;
  padding: 2px 12px;
  color:black;
  position: relative
}

.nav-item:last-child:before {
  position: absolute;
  content: "|";
  left: 0;
  color: black;
}

<div>
  <ul class="flex-box">
    <li class="nav-item">
      <a class="nav-link" routerLink="/">Home</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" routerLink="/services">Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/about">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/login">Login</a>
    </li>
  </ul>
</div>

Another approach is to add an element that acts as a divider and spans the full height of the li element:

.nav-item:last-child {
  position: relative
}
.nav-item:last-child:before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0; 
  width: 1px;
  background-color: #d4d4d4;
}

If you prefer not to rely on :last-child, you can assign a specific class to the last li item for the same effect:

      <li class="nav-item login-link">
        <a class="nav-link" routerLink="/login" style="color:white">Login</a>
      </li>

      //css
      .login-link {
         border-left: solid 1px #d4d4d4;
      }

To create dividers between every li except the last one, you can use the adjacent sibling combinator "+" in CSS:

.nav-item + .nav-item {
  border-left: solid 1px #d4d4d4;
}

Alternatively, you can achieve this using a :before pseudo-element:

.nav-item {
  position: relative
}
.nav-item + .nav-item:before {
  position: absolute;
  content: "|";
  left: 0;
  color: #d4d4d4;
}

Answer 3

Answer №2

Have you considered including a span within your li element for the About Us section? Take a look at the example below:


<li class="nav-item">
            <a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
<span>|</span>
          </li>

Answer 4

Have you considered including a span within your li element for the About Us section? Take a look at the example below:


<li class="nav-item">
            <a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
<span>|</span>
          </li>

Answer 5

Answer №3

To create a semantically valid code for your navigation bar, simply include a bar wrapped in a list item tag within your nav section. Check out the example below:

.flex-box {
  display: flex;
}

li,
.nav-item {
  text-decoration: none;
  list-style-type: none;
  padding: 2px 4px;
  color: black;
}

.bar {
  font-weight: bold;
}

<div>
  <ul class="flex-box">
    <li class="nav-item">
      <a class="nav-link" routerLink="/">Home</a>
    </li>
    <li class="nav-item">
      <li class="dropbtn">Services</li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about">About Us</a>
      </li>
      <li class="bar">|</li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/login">Login</a>
      </li>
  </ul>

</div>

Answer 6

To create a semantically valid code for your navigation bar, simply include a bar wrapped in a list item tag within your nav section. Check out the example below:

.flex-box {
  display: flex;
}

li,
.nav-item {
  text-decoration: none;
  list-style-type: none;
  padding: 2px 4px;
  color: black;
}

.bar {
  font-weight: bold;
}

<div>
  <ul class="flex-box">
    <li class="nav-item">
      <a class="nav-link" routerLink="/">Home</a>
    </li>
    <li class="nav-item">
      <li class="dropbtn">Services</li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about">About Us</a>
      </li>
      <li class="bar">|</li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/login">Login</a>
      </li>
  </ul>

</div>

Putting a | in the navigation bar

Answer №1

Answer №2

Answer №3

Similar questions

Issue with disabled state in radio button container not functioning

Arrange the image in a way that flows smoothly with the text

Trouble Ensuring First Radio Button Is Checked in Angular 6

Issues with scrollspy functionality in Bootstrap 4 beta

Is there a way to automatically scroll to the last dynamically added div?

The overflow:hidden property does not completely conceal the parent div when it has a border-radius applied

Navigate a Bootstrap 4 drop-down menu by scrolling rather than having it drop down

Combining Angular with Google Maps

Achieving precise field alignment with React.js and Bootstrap

Is it possible to create a crossfade effect using angular animate and ngFor in my project?

How can the navbar class be altered when there is a change in routes?

Display or conceal elements based on the screen size using Bootstrap 3 classes

Align columns responsively with Bootstrap and center overlay image

CSS container design with customized paragraph formatting

Having trouble sending data from AJAX to PHP

unable to modify the attributes of an object in Angular

I am interested in incorporating a personalized class into the Kendo UI for Angular TabStrip

When adjusting to mobile dimensions, the responsive website design struggles to center the navbar properly

Mastering intricate CSS customization

Navbar toggler in Bootstrap 4 is invisible