When hovering over the menu, the underline appears, not based on the length of the

Is there a way to make the underline below menu items on hover match the length of the word instead of the element?

<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand active" href="index.html">
        <img src="./examWebLaBotteLogo.svg" alt="Logo de LA BOTTE"><span class="sr-only">(current)</span></a>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav nav-fill w-100">
        <a class="nav-item nav-link" href="menu.html">La carte</a>
        <a class="nav-item nav-link" href="suggestions.html">Nos suggestions</a>
        <a class="nav-item nav-link" href="event.html">Événements</a>
        <a class="nav-item nav-link" href="contact.html">Contact & horaires</a>
      </div>
    </div>
  </nav>
cssbootstrap-4underline

Answer №1

Make adjustments to the padding on hover and apply margin to the normal class as shown in the example, with text decoration set to none. Hopefully this will be helpful..

.navbar-light .navbar-nav .nav-link {
    padding-bottom: 5px;
    margin:5px;
    font-family: 'Nunito Sans', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    line-height:2rem;
    color: black;
}

.navbar-light .navbar-nav .nav-link:hover {
    font-family: 'Nunito Sans', sans-serif;
    text-transform: uppercase;
    color: black;
    border-bottom: 5px solid #b40900;
}
<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand active" href="index.html">
        <img src="./examWebLaBotteLogo.svg" alt="Logo de LA BOTTE"><span class="sr-only">(current)</span></a>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav justify-content-between w-100">
        <a class="nav-item nav-link" href="menu.html">La carte</a>
        <a class="nav-item nav-link" href="suggestions.html">Nos suggestions</a>
        <a class="nav-item nav-link" href="event.html">Événements</a>
        <a class="nav-item nav-link" href="contact.html">Contact & horaires</a>
      </div>
    </div>
  </nav>

Answer №2

This method has been successful for me

I want to highlight that I am utilizing the Elementor Navigation Menu Widget

.hfe-nav-menu__layout-horizontal li.menu-item, .hfe-nav-menu__layout-horizontal > li.menu-item {
    margin-right: 20px;
    margin-left: 20px;
}
.elementor-21 .elementor-element.elementor-element-48d02c5 .menu-item a.hfe-menu-item {
     padding-left: 0px !important; 
     padding-right: 0px !important; 
}

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

What is the best way to incorporate a dynamic background in NextJS using Tailwind?

I have a poster image that I want to use as a background image, fetched from MovieDb. I tried putting it inside the className like this: className={bg-[url('${path}')] h-screen bg-cover bg-center text-white border-b-8 border-b-solid border-b-sla ...

javascriptcssnext.jstailwind-css

Using HTML Media tags is completely ineffective

It took hours to try to get them working, but still nothing. I attempted using media="xx" and @media, but the CSS doesn't seem to work at all, or only one of them works. I can't locate an obvious error, and it's becoming frustrating. <!D ...

htmlcssresponsive-design

Input tag styled in a center-aligned word document format

My Desired Text Alignment: I want the text to be centered horizontally at the top of the input. Words should break after hitting the internal padding, similar to how document creation software like Google Docs works with center alignment. Current Alignme ...

htmlcssreactjsinputbootstrap-4

Creating a dynamic 3x3 layout using flexbox: a step-by-step guide

Is it possible to dynamically create a layout in Next.js with 3 columns of 3 rows using flexbox, React Bootstrap, or CSS only? https://i.sstatic.net/tTinS.jpg ...

cssreactjslayoutflexboxnext.js

Adding a class to an element within a React template using JS is not possible

I am currently using a Bootstrap template for my React app. Within the template, there is a JavaScript code that should make the header sticky when scrolling. It functions as expected in pure HTML, but once I move the header to a React template (necessary ...

javascriptreactjsbootstrap-4

What could be causing the uneven alignment and padding of texts in my input box and select box in Bootstrap 5?

I'm facing a challenge that has me stumped. I have a form with a text input and a select drop-down, all styled using Bootstrap 5. My goal is to reduce the default left padding on these form controls by adding padding-left:0.3rem to my style definition ...

cssbootstrap-5

Anchored text is obscured by a fixed Bootstrap 4 navigation bar at the top

I'm currently developing a website that utilizes bootstrap 4. I have successfully fixed the <nav> element to the top of the page using the fixed-top class. Despite applying padding-top to the <body> tag as recommended, I am encountering an ...

htmlcsstwitter-bootstrapbootstrap-4

jQuery UI Datepicker extending beyond its bounds

My Datepicker is expanding and filling the entire screen. What could be causing this issue? Here is my code: Additionally, how can I change the date format in jQuery to appear as dd-mm-yyyy? https://i.stack.imgur.com/IQzVV.png HTML: <!DOCTYPE html&g ...

jqueryhtmlcss

Is there a way to change the color of a checkbox (both the box and font) in the disabled state using material ui

When using Material UI v4.9.12, it is possible to create a customized checkbox with a specific color that remains fixed: const GreenCheckbox = withStyles({ root: { color: green[400], '&$checked': { color: green[600], }, ...

cssreactjsmaterial-ui

Choosing and adding a div to another using the select method

Can someone assist me with this task? My goal is to dynamically append a div when selecting an option from a dropdown, and hide the div when the same option is selected again. Additionally, I want the name of the selected option to be displayed on the left ...

htmljquerycssdrop-down-menubootstrap-select

button that stays in place on smaller screens

Hello everyone, I am currently facing an issue while trying to create a button with fixed positioning. The problem arises on smaller screens where the button completely disappears. Here is my CSS code: .sound_button{ background: #FFD700 url("Images/ ...

htmlcsscss-position

When the start and end times are the same, the time picker is returning a null value

<input type="text" id="begin" class="form-control timepicker timepicker-no-seconds" name="start_event"> <input type="text" id="close" class="form-control timepicker timepicker-no-seconds" name="end_event"> The script for both is: $('#beg ...

phpjsonfullcalendarbootstrap-4

Resolved navigation bar problems

As a beginner in web development, I am working hard to launch my first website. Today, I have a question for the stack overflow community regarding a fixed navbar issue. The navbar I have created is functioning properly on Chrome, but when it comes to Fire ...

phphtmlcssnavbarfixed

What is the best way to ensure my images are responsive to the varying device sizes when displayed on this website?

In my endeavor to design a 2-column layout using Bootstrap, I aim for each row to consist of two columns: One column will contain text, while the other will display images that complement the textual content. Below is the Bootstrap code snippet for the n ...

htmltwitter-bootstrapcssvuejs2

Adjusting table dimensions according to webpage dimensions

When looking at the image below, you will notice a div that contains a table with some content. However, when resizing the web browser's page, the table goes beyond the boundaries of the div. https://i.sstatic.net/SRlzM.png My goal is to reduce the ...

htmlcsshtml-table

Are `<text>` nodes unable to utilize ligature fonts in CSS/SVG?

Check out this JsFiddle demo: http://jsfiddle.net/d0t3yggb/ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="material-icons">add add add add</div> <svg width="100%" height="100% ...

javascriptcsshtmlsvgfonts

Unrecognized files located within the same directory

My main.html file located in the templates folder also contains three additional files: date.js, daterangepicker.js, and daterangepicker.css. Despite including them in the head of the HTML as shown below: <script type="text/javascript" src="date.js"> ...

javascripthtmlcssanchor

Slide-out left menu using HTML and CSS

Currently, I am in the process of constructing a website that requires a menu to gracefully slide from the left side of the screen (with a width of 0px) to the right side (expanding to a width of 250px), all with the help of jQuery animations. Here is wha ...

jqueryhtmlcss

Require assistance with displaying a menu on a website using JQuery

Is there a way to create a menu similar to the one shown in the image below?https://i.sstatic.net/QxNPL.png To learn more about this menu, you can visit their website by clicking on this Link. I have copied some code (HTML code and links to CSS and .js fi ...

javascriptjqueryhtmlcss

Guide to centering images with HTML and CSS

I've recently created a website with a homepage design that I'd like to tweak. Currently, the layout looks like this : https://i.stack.imgur.com/5UeUn.jpg My goal is to reposition the ficstore logo to the center and divide the bar into two halv ...

htmlcsstwitter-bootstrap