Personalized Bootstrap 4 navigation bar tailored specifically for the application process

Seeking a customized progress nav-bar for my application, with a design similar to this:

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

Discovered it on this website.

Despite using the provided HTML and CSS, I'm unable to make it work with Bootstrap 4.

HTML

<ul class="nav nav-pills nav-wizard">
    <li class="active"><a href="#" data-toggle="tab">Home</a></li>
    <li><a href="#" data-toggle="tab">About</a></li>
    <li><a href="#" data-toggle="tab">Contact</a></li>
</ul>

CSS

.nav-pills.nav-wizard > li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.nav-pills.nav-wizard > li + li {
  margin-left: 0;
}
.nav-pills.nav-wizard > li:first-child {
  border-left: 0;
}
.nav-pills.nav-wizard > li:first-child a {
  border-radius: 5px 0 0 5px;
}
.nav-pills.nav-wizard > li:last-child {
  border-right: 0;
}
...

My attempt looks like this:

https://i.sstatic.net/8AiPd.png

htmlcssbootstrap-4navnav-pills

Answer №1

Implementing CSS clip-path

Visit this site for more information.

.nav-clipped .nav-link {
    padding: 1rem 2rem;
}

.nav-clipped .nav-item {
  -webkit-clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 90%, 15% 50%, 0% 0%);
  clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 90%, 15% 50%, 0% 0%);
  background-color: #ddd;
  border-radius: .25rem;
}

.nav-clipped .nav-item:first-child {
  -webkit-clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 0 52%, 0 0);
  clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 0 52%, 0 0);
}

.nav-clipped .nav-item:last-child {
  -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 15% 52%, 0 0);
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 15% 52%, 0 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.comm/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav nav-pills nav-clipped">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

Answer №2

To achieve the desired styling, make sure to include the following CSS:

.nav-pills.nav-wizard > li a{
    padding: 8px 15px;
    display: -webkit-box;
}

Here is a sample code snippet for reference:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<ul class="nav nav-pills nav-wizard">
  <li class="active"><a href="#" data-toggle="tab">Home</a></li>
  <li><a href="#" data-toggle="tab">About</a></li>
  <li><a href="#" data-toggle="tab">Contact</a></li>
</ul>

<style>
  p {
    font-family: Lato;
  }
  
  /* Your custom CSS styles go here */
  
</style>

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

Stop the page from scrolling

I'm trying to find a way to disable page scrolling, so I used this style for the body: overflow: hidden; Surprisingly, it worked perfectly on desktop but had no effect on mobile devices. After checking out this resource, it seems that creating a ch ...

htmlcss

The function history.popstate seems to be malfunctioning, as it is triggered by both the forward and backward navigation buttons in

When I press the back button, I am attempting to retrieve the previous state. Upon inspecting, I noticed that the popstate function is also triggered by the forward button. However, it does not revert to the previous state even though the popstate function ...

javascripthtmlangularjshtml5-historyweb-frontend

Ways to identify the active anchor within an li element

Below is the code snippet I am currently working with: <li> <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a> </li> <li> <a href="<?php echo base_url()?>home/promos/text ...

javascriptjquerycssjquery-mobile

What is the best way to store a video file in a database?

Recently, I came across a task where I needed to insert a video in a database and display it using an HTML5 video control. Despite successfully saving the video in the database, I encountered an issue when trying to play the video. Upon investigating, I ...

asp.nethtmlvideo

Set maximum size for background image in div

I'm facing some challenges with setting the maximum height of a background image within a div. I want the max height to be equal to the actual height of the image, without stretching it. Ideally, if there is excess content in the div, it should stop a ...

javascriptjqueryhtmlcss

Develop a unique gradient in Bootstrap 4 by utilizing the SASS function known as theme-color-level

I've configured my Bootstrap 4 theme variables like this: // custom-theme.scss $primary: green; $secondary: purple; Next, I added some custom variables: // custom-variables.scss @import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variable ...

sassbootstrap-4

Adding a custom source to the script tag in Angular 7

I am currently using angular cli to develop my web application. The app is being built in the dist folder as of now. This is the index.html file: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Adm ...

javascripthtmlangularangular7

Using CSS transform to enhance Flash content

I am currently working on a web application that is contained within an iframe. The iframe has been scaled using -webkit-transform:scale(0.8), which is functioning well. However, I am encountering an issue with the flash audio recorder within the iframe no ...

cssflashtransformscale

Having trouble understanding the differences between Bootstrap 4's .list-inline class and .list-inline-item class?

I am currently utilizing Bootstrap 4 within Wordpress. Strangely, I am facing an issue where I am unable to have list items appear inline (horizontally) solely by using the class .list-inline on the list itself, as shown below: <ul id="dances" class="l ...

htmlcsswordpressbootstrap-4

Navigating pages in tinymce editor

Currently, I have implemented TinyMCE as the editor for my PHP-based website. However, I am facing a challenge in integrating pagination within the editor. My goal is to allow users to input long content that will be displayed across multiple pages inste ...

phpjqueryhtmlcsstinymce

Ways to set a button as default clicked in an Array

I have a collection that stores languages and their boolean values. My goal is to automatically set buttons to be clicked (active) for each language with a true value in the collection. Whenever a different language is selected by clicking on its respect ...

javascripthtmltypescript

Guide on implementing image tag and source in Django template language system

I need to include a base64 encoded image in JSON format into a Django HTML template. What is the best way to do this? <img src="R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp(Some 64 bit image);base64 /> How can I properly translate this code snippet into my ...

htmlcssjsondjangoencode

Anchoring HTTP headers in HTML tags

Currently, I am working on some code to enable dragging files from a web app to the desktop by utilizing Chrome's anchor element dragging support. The challenge I am facing is that certain file links require more than a simple GET request - they nece ...

javascripthtmlhttp-headersanchor

New and improved Bootstrap 5 menu bar

I am seeking to customize my navigation bar by adding a black background that spans its entire length. I do not want to rearrange the links or logo; just apply a background color. Another issue arises during SASS compilation: I am trying to change the col ...

htmlcssnavbarbootstrap-5

The data retrieved from the $.ajax() request in Vue.js is not properly syncing with the table

After setting up an $.ajax() function and ensuring the data binding is correctly configured, I expected the data to append to a table on page load without any issues. However, the data is not appearing as expected. Is there something that I might be overlo ...

javascriptjqueryhtmlajax

How can I wrap text in Angular for better readability?

I've created a calendar in my code that displays events for each day. However, some event descriptions are too long and get cut off on the display. Even after attempting to use Word Wrap, I still can't see the full text of these events unless I c ...

htmlcssangulartypescriptword-wrap

Exploring the engaging section of interconnected images featuring rounded edges

I'm currently working on a unique widget that can be found at this link: http://codepen.io/JonnyNineToes/pen/zGYxwV This widget features an image that reveals additional information when clicked, with the extra info sliding out from behind the image. ...

htmlcsscss-shapes

ensure that angular's ng-if directive sets aside space to display content when triggered by an event

I'm facing an issue with my modal form setup where if a text-field is left blank, a label saying "it is required" is generated below the field, causing the "Proceed" button to move (along with all other elements below it). How can I make sure that DOM ...

javascriptjquerycssangularjs

How can I create a hyperlink that leads to multiple pages?

I am looking to create a hyperlink that will lead to a random webpage each time it is clicked from a selection of URLs. Can anyone suggest a suitable function to get started on this task? ...

html

Optimal method for arranging Vue components

When deciding where to position a child element, should it be done within its own CSS scope or from the parent? In the scenario provided below, would it be more effective to use margin-left: auto; on the parent element or the child element (both options a ...

cssvue.js