Creating a sleek hover effect with a bottom border on your Bootstrap navbar

Having trouble implementing a hover effect with a bottom border in the Bootstrap navbar, similar to this:

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

However, my current result looks like this:

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

I want to adjust the bottom border to span the entire height of the navbar.

.nav-link:visited,
.nav-link:link {
  border-bottom: 2px solid transparent;
}

.nav-link:hover,
.nav-link:active {
  border-bottom: 2px solid #1bcfc6;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="./home.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./about.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./product.html">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./contact.html">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

htmlcssbootstrap-4navbar

Answer №1

The default padding on the navbar element is caused by Bootstrap classes. To override this, you can use the Bootstrap classes pb-0 and pt-0. These classes stand for Padding Bottom 0 and Padding Top 0 respectively. Using these classes will ensure that the text is evenly spaced vertically.

To see the full effect, view the output in fullscreen as the navbar collapses on smaller screens.

.nav-link:visited,
.nav-link:link {
  border-bottom: 2px solid transparent;
}

.nav-link:hover,
.nav-link:active {
  border-bottom: 2px solid #1bcfc6;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-0 pb-0">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="./home.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./about.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./product.html">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./contact.html">Contact Us</a>
      </li>
    </ul>
  </div>

</nav>

Check out the Output below:

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

Answer №2

An effective method to accomplish this is by customizing the padding of the navigation bar in Bootstrap as shown below:

.navbar {
  padding: 0 !important;
}

Answer №3

To truly understand and utilize the padding and margin properties within Bootstrap, it is crucial to inspect elements such as nav, ul, li, and a.

When incorporating a border, keep in mind that it will occupy all available space, including the padding. To work around this limitation, consider using CSS pseudo-elements like ::before or ::after. Below is a basic example demonstrating how this can be achieved:

<style>
  .nav {
    text-align: center;
    background: rgba(0,0,0,0.1);
  }

  .nav a {
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 3px;
    display: inline-block;
    color: #000;
    font-family: sans-serif;
    font-weight: 600;
    transition: all .3s ease;

    position: relative;
    z-index: 1;
  }

  .nav a:hover,
  .nav a.active {
    background: #000;
    color: #fff;
  }

  .nav a::before {
    position: absolute;
    content: '';
    width: calc(100% - 20px);
    height: 3px;
    background: orange;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease;
  }

  .nav a.active::before,
  .nav a:hover::before {
    visibility: visible;
    opacity: 1;
  }
</style>


<div class="nav">
  <a href="#">item-1</a>
  <a href="#">item-2</a>
  <a href="#" class="active">item-3</a>
  <a href="#">item-4</a>
  <a href="#">item-5</a>
</div>

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

Numpad functionality in JQuery malfunctioning post-ajax request

Using the jQuery numpad plugin has been flawless until after an AJAX call. I have tried various functions like on('click') and others, but unfortunately, none of them worked as expected. Apologies for my poor English! You can find the extension l ...

javascriptjqueryhtmlajax

Exploring Unicode Symbols for Icon Selection

I'm currently working on integrating an icon picker into my application that will enable the user to select a mathematical operator for data comparison. While I have successfully implemented the fontawesome-iconpicker on the page, I am encountering d ...

javascriptcssunicodeiconsglyphicons

As you hover over the chosen image, the selected image will appear

I have a simple HTML code with some JavaScript where I display sets of images. All I want is for the images to pop up when hovered over, appearing in a larger size. Below is the example HTML Code: <div class="content-box-left-bootomgrid lastgrid"> ...

jqueryhtmlimage

Highlight a pair of words in a phrase using jquery technology

Only one word in my code is highlighted $(document).ready(function() { let firstword = 'web'; let secondword = 'js'; $(".field.ConditionsAccept>.caption:contains('" + secondword + "'):contains('" + firstword ...

javascriptjquerycssregex

Encountering an issue trying to insert multiple objects into a Laravel session

Whenever I attempt to add an item to the cart, it only adds it once. If I try to do it again, it ends up overwriting the existing item and the counter for the items in the cart remains at 1. I've experimented with switching between a button and a lin ...

phphtmllaravellaravel-5

What is the method for positioning the cursor at the beginning of a center-aligned placeholder within a contenteditable element?

Here is the code snippet I am working with: HTML: <div class="title" contenteditable="true" placeholder="Title"></div> CSS: .title { width: 500px; margin: 0 auto; text-align: center; } [contenteditable=true]:empty:before{ conte ...

javascriptjqueryhtmlcssplaceholder

Interactive horizontal slideshow for hyperlinks - bootstrap framework and model-view-controller architecture

I am currently working on an MVC project that utilizes Bootstrap. My requirement is to have a horizontal menu of links that can slide left and right using arrows (similar to a carousel, but for links instead of images). To be more specific, the menu need ...

jqueryhtmlcssasp.net-mvctwitter-bootstrap

Spree Deluxe - Customizing color scheme variables

We're struggling to modify the color variables in Spree Fancy. The documentation suggests creating a variables_override.css.scss file. But where exactly should this file be placed? We've tried adding it under the stylesheets folder in assets and ...

cssruby-on-railssassspree

Hexagonal design reminiscent of a beehive

I am struggling with implementing a specific layout using grid CSS and I'm open to using flex or any other method. .container { display: grid; grid-template-columns: repeat(auto-fit, 50px); grid-template-rows: repeat(auto-fit, minmax(80px, 80px)); ...

htmlcssgrid

The Chart.js graph fails to appear when placed within an ngIf directive

I have encountered an issue with my simple scatter line chart created using Chart.js within a bootstrap panel. It works perfectly fine until I place it inside an ngIf div. Has anyone faced this problem before? Is there a solution to make the chart display ...

htmlangularjstwitter-bootstrapangularchart.js

Tips for populating information in an ASP.NET MVC 5.2 class using a bootstrap "contact us" form and sending it to my email

My website features a "Contact Us" page where users can fill out a form to send me an email. The form requires users to input their first name, last name, email address, and a message using a Bootstrap 4.xxx form. However, I am facing an issue where the da ...

c#asp.net-mvcbootstrap-4form-submitasp.net-mvc-5.2

Can images be placed on the border?

Hi there! I am trying to add an image on a border with a 100px solid width using CSS. I have experimented with positions and z-index, but I can't seem to get the desired effect. Any ideas on how to achieve this? Here is an example image: https://i.sst ...

javascripthtmlcsssass

Utilizing CSS and JavaScript for Image Masking

Is it possible to create a div that takes on the shape shown in this image and then fill it with an image? Alternatively, is there a way to transform an image into that particular shape using CSS or Javascript? Additionally, is it possible to arrange m ...

htmlcss

Live visualization from a Remote System (External Network)

I am looking to visually represent real-time sensor data (streaming data) using Node.js, HTML, and MySQL. I have set up MySQL to store the real-time sensor data, an index.html file that implements Google Chart through the doPoll app.js file, and the app.js ...

htmlmysqlnode.js-stream

The Popover style from React-Bootstrap seems to be missing when applied to my component

Attempting to incorporate a Popover with overlay trigger from React - Bootstrap has proven to be quite the challenge. If you check this image, you'll see what it's supposed to look like. This is the code I used: var {Button, Overlay, OverlayTr ...

csstwitter-bootstrapreact-bootstrapbootstrap-popover

"Creating Rounded Corners in HTML: A Step-by-Step Guide

Is there a way to round the corners of this image? Below is an excerpt from my body... <body> <h1 style="float:left; width:37%;"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h1> <div style= ...

htmlcssimageborder

Using javascript to quickly change the background to a transparent color

I am in the process of designing a header for my website and I would like to make the background transparent automatically when the page loads using JavaScript. So far, I have attempted several methods but none seem to be working as desired. The CSS styles ...

javascripthtmlcss

How come the information isn't being transferred between components?

Is my method correct if I want to pass the this.prompt() function from TitleBar to Portfolio? This is what my index.html file looks like: var TitleBar = React.createClass({ render: function() { return( <div className="jumbotron"> ...

javascripthtmlcssreactjs

What is the best way to arrange the second div in the second row, while the first and third div are displayed on the first row within the MUI appbar

I have 3 components in the appbar, 1. Logo 2. Search Input 3. Login Buttons When viewing on desktop, all three components will be in a single row as shown below https://i.stack.imgur.com/FYMEH.png Below is my code snippet: export default function NavBar ...

cssreactjsflexboxmaterial-ui

Tips for securely transmitting data via a hidden form using the POST method

I have a query that displays records of people, and I want to send the id_Persona using a hidden form through a post function to the idsPersonas.php page. However, when I try to do this, it redirects me to an undefined page. Here is the code snippet: < ...

javascriptphpjqueryhtmlmysql