Enhance Your Navigation with Bootstrap 4's Eye-Catching Link Hover

I'm struggling to implement a hover effect that specifically targets the a-links in the navigation bar without affecting the forwardslashes. It seems like the effect is applying to the entire navbar due to a potential conflict with Bootstrap 4.

HTML

 <nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">
            <a class="navbar-brand" href="https://www.facebook.com/GetMove.Official/">GET MOVE</a>
            <button
                class="navbar-toggler mr-left custom-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home<span> / </span><span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#past-bookings">Archive<span> / </span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About<span> / </span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#subscribe">Newsletter<span> / </span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="mailto: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd3d4d7dafbdcdecfd6d4cdde95d5decf">[email protected]</a>">Contact</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav flex-row justify-content-center flex-nowrap">
                    <li class="nav-item">
                        <a
                            class="nav-link nav-social-icon"
                            target="_blank"
                            href="https://www.facebook.com/GetMove.Official/"
                            ><i class="fab fa-facebook-square"></i
                        ></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
                            ><i class="fab fa-instagram"></i
                        ></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"
                            ><i class="fab fa-soundcloud"></i
                        ></a>
                    </li>
                </ul>
            </div>
        </nav>

CSS

.nav-item:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.nav-item:hover:after {
    width: 100%;
}

Fiddle available at https://codepen.io/pen/WNNPdxv

cssbootstrap-4

Answer №1

To resolve this issue, avoid placing separators inside the anchor elements. Here is an alternative method that removes the extra HTML by utilizing the content property. This technique is reminiscent of Bootstrap's breadcrumb navigation.

As you already know, start with some cleaning up ^^

  • Eliminate the span separators from nav-links
  • Utilize spans for text nodes (convenient for adding animations)
  • Shift the animation from :after to :before (as a separator logically comes after an element, except for the last-child possibly; this approach also provides control over the element's width to adjust the right position.)
  • Use :after for the separator
  • Ensure full width for the main navigation and apply flexbox to align the space it occupies (flex-end, center, space-between, etc.)

HTML Modifications

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav navbar-primary w-100 ml-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">
                <span>Home</span>
                <span class="sr-only">(current)</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#past-bookings"><span>Archive</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#"><span>About</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#subscribe"><span>Newsletter</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="mailto: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93fbfcfff2d3f4f6e7fefce5f6bdfdf6e7">[email protected]</a>"><span>Contact</span></a>
        </li>
    </ul>
    <ul class="nav navbar-nav navbar-secondary flex-row justify-content-center flex-nowrap">
        <li class="nav-item">
            <a class="nav-link nav-social-icon" target="_blank" href="https://www.facebook.com/GetMove.Official/"><i class="fa fa-facebook-square"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"><i class="fa fa-instagram"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"><i class="fa fa-soundcloud"></i></a>
        </li>
    </ul>
</div>

Solution

To address the problem, place the animation on the before pseudo-element and the separator on the after pseudo-element.

.navbar-primary .nav-item:after {
    content: "/";
    position: absolute;
    top: 0.25rem;
    left: auto;
    right: -0.5rem; /* adjust space for the separator */
}

.navbar-primary .nav-item:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.navbar-primary .nav-item:hover:before {
    width: 100%;
}

If you need to change the character, you only need to edit in one place.

View DEMO

If you wish to modify the animation without padding, consider adjusting the nav-link padding using calc().

.navbar-primary .nav-link:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0.5rem; /* nav-link padding-left */
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.navbar-primary .nav-link:hover:before {
    width: calc(100% - 1rem); /* subtract nav-link padding left and right */
}

View DEMO

Answer №2

To achieve the hover effect on the a-link, you can either add the hover property directly to the a-link and set its position to relative, or apply the class of position-relative to the a-link element.

.nav-item a {
    position: relative;
}
.nav-item a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.nav-item a:hover:after {
    width: 100%;
}

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

Tips for entering multiple values in an input field

I am attempting to implement a feature where multiple names can be added from an autocomplete drop-down menu to an input field, similar to the example shown below: https://i.sstatic.net/D4hGA.jpg Here is what I aim to create: Upon selecting an item from ...

javascripthtmlcss

Having issues with the sidebar malfunctioning and unsure of the cause

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> I've been working on creating a sidebar for my website, but it's not functioning as expect ...

javascriptjqueryhtmlcss

Create a scrollable Bootstrap table without impacting the layout grid system

Is there a way to create a scrollable table without impacting the grid system layout? How do I make a table scrollable while keeping the col-xs tag intact? <table class="col-xs-12"> <thead> <th class="c ...

csstwitter-bootstraphtml-table

Adjust the height of a TextField component in material-ui

index.js import React from 'react' import TextField from '@material-ui/core/TextField' import style from './style' import withStyles from 'hoc/withStyles' import { connect } from 'react-redux' class Sear ...

cssreactjsmaterial-ui

Tips for setting a specific height for an HTML table

For some reason, I can't seem to control the height of this table. I've set it to a maximum of 20px but all the rows are still showing. Here is the CSS: table { border:1px solid black; overflow:hidden; height:20px; max-height:20 ...

htmlcss

Aligning CSS border headers in a slanted or rotated table cell format

Is there a way to create slanted or rotated table headers in HTML? How can I ensure that the slanted inner-side header border aligns perfectly with the vertical border of the table cell element? Here is an example of the HTML code: <table> < ...

htmlcss

After migrating the Django website to a new instance, the CSS ceased to function properly

I recently made the switch from hosting my website on Redhat to Amazon Linux on EC2 due to the cost savings. After configuring the Apache server and Django settings, the website seemed to be functioning properly except for the layout of the HTML. The CSS w ...

cssdjangomigration

The table-cell appears to be behaving as if it is disregarding the specified

Here is my custom construction: <div style="display: table;"> <div style="display: table-cell; width: 50px; background-color: red;">a</div> <div style="display: table-cell; width: 100%; background-color: green;">...</div ...

htmlcss

Customize the design of a React Material-UI select dropdown by overriding

I am currently utilizing the React MUI Select Component for my forms, specifically for language selection. My issue arises when I need a different style for the dropdown menu of the language Select component. Overriding the relevant class would apply this ...

cssreactjsmaterial-uidropdown

Using the fieldset element in AngularJS Material causes disruptions in my flex layout

My current issue can be illustrated through two code examples: The first example functions properly when the fieldset is not included. In the second example, including the fieldset causes the layout to extend beyond the window when there is long text (in ...

javascriptcssangularjsflexboxangularjs-material

What is causing the click event to not fire in this straightforward jsfiddle demonstration?

While attempting to create a demonstration on jsfiddle, I encountered an issue where the click event for the toggle button is not firing. An error message stating myclick is not defined appears. I have researched other solutions that suggest using the No ...

javascripthtmlcssjsfiddle

Changing button alignment using CSS to create a new line

Currently, I am working on a React project using Material-UI where I am trying to create a numpad. The code snippet below showcases part of my implementation: // some parts are omitted for conciseness const keys = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0]; ...

cssreactjsmaterial-ui

Dynamically apply colors to the pagination arrows to enhance visual appeal

Looking to incorporate the 4 standard arrows for pagination with dynamic coloring. Any advice on how to achieve this? Thanks, Javier ...

htmlcsspng

I am experiencing difficulty getting my component to properly implement the bootstrap NavBar and NavIcon styles

I am new to using bootstrap with react and I am facing an issue where the dimensions are not being applied to my Navbar and Navbar Icon. I have already installed dependencies and used className instead of class, but still no changes are visible. import Re ...

javascriptreactjsbootstrap-4

Navigating on Blogger can be a tricky task when it comes to searching and

I recently added a Table to my blogger post, along with an input form for readers to easily search data. After finding the code on W3Schools (link here), I implemented it successfully. However, I am looking to make some improvements. Here is my question: ...

javascripthtmlcssblogger

Tips for eliminating the gap between a heading and column in Bootstrap 4

.rowHeight{ height: 100px; } .padding-0 { padding-right: 0px; paddig-left: 0px; margin-left: 0px; margin-right: 0px; } .cart{ ...

htmlcssbootstrap-4

Using CSS to Utilize Grid or Table Display

Hey everyone, I could really use some assistance with formatting a layout using CSS. This is the look I am aiming for: https://i.sstatic.net/HCIJ0.png I have made some progress with my CSS but I'm struggling to get the menu zone to expand to the ful ...

htmlcssgridfrontend

The table is too large for the parent div in which it is placed, causing

Check out this example I have for putting a table in a div and making it fill the div: ex1_jsfiddle table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; height: 100%; table-layout: fixed; } td, th { border: 1px sol ...

htmlcss

Is it possible to include Helvetica or a similar font in my web application for shipping?

My web-app is Java/HTML based and hosted on the cloud. Users will access it using IE, Chrome or Mozilla. I would like to use Helvetica or a similar font, but they are not readily available on most systems (windows/IE/Chrome/Mozilla). Is there a way for me ...

htmlcssfonts

Sideways movement of a single line within a table

Would you please help with a challenge I'm facing? I want to create a horizontally scrollable row that spans 100% of the page width without overflowing on top of the background image and while keeping the header text in focus. This is what I have att ...

cssreactjsmaterial-ui