Change the appearance of a border without adjusting its position

I'm looking to add a stylish hover effect to my website by applying a border-bottom that changes color when the mouse hovers over it. I want this border to seamlessly override the existing one for a smooth transition. An excellent example of what I'm aiming for can be seen on this webpage: (check out the navigation bar).

If you'd like to see a live demonstration, here's a jsfiddle link for reference: https://jsfiddle.net/ey006ftg/

Also, I have a minor query - does anyone know why there is a slight gap between the links when hovering over them, and how to eliminate it?

Thanks!

htmlcssbordernav

Answer №1

To implement this style, simply include the following CSS in your code:

header a {
    border-bottom: solid transparent 3px;
}

You can view a demonstration of the effect on this jsfiddle: https://jsfiddle.net/SaraH45/fdsn25ht/2/

Answer №2

To achieve the desired overlay effect for the border, you can utilize a negative margin as illustrated below:

nav {
  border-top: 1px solid grey;
  border-bottom: 3px solid black;
  width: 100%;
  font-size:0;
}
nav ul {
  width: 1056px;
  margin: 0 auto;
  text-align: center;
  width: 1056px;
}
nav ul li {
  display: inline-block;
  width: 17%;
}
nav ul li a {
  display: block;
  padding: 21px 0;
  font-size: 18px;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
}
nav a:hover {
  color: orange;
  transition: 0.2s;
  border-bottom: solid orange 3px;
  margin-bottom: -10px;
}
a {
  color: black;
  text-decoration: none;
  outline: 0;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Careers</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

For tips on minimizing the gap between inline elements, consider setting a font-size of 0 initially for the a tag to combat spacing issues like in the provided snippet under the nav element.

Answer №3

Check out the fiddle demonstration

To achieve a neat effect, it's as easy as setting your default border to transparent and changing the color on hover.

nav ul li a {
    display: block;
    padding: 21px 0;
    font-size: 18px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: solid transparent 3px; /* ensure to include this! */
    transition:0.3s; /* you can also utilize this for extra flair :) */
}

Answer №4

Here is a solution for achieving the desired border-bottom effect, check out this JSFiddle demo

In order to set the border-bottom as you prefer, it's necessary to add a border to the anchor tag like so:

nav ul li a {
    display: block;
    padding: 21px 0;
    font-size: 18px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 3px solid black;
}

To eliminate the space between menu items, apply a small adjustment by adding negative margin to the li tags within the menu like this:

nav ul li {
    display: inline-block;
    width: 17%;
    margin-right: -4px;

}

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

Angular service unable to maintain data continuity across multiple controllers

I am facing an issue while attempting to set the title in controller1 using a service and then accessing the updated title in controller2. The function sharedProperties.setTitle(title) works perfectly fine in controller1, however, in controller2, I keep g ...

htmlangularjsangularjs-scopeangular-services

How can I remove unnecessary CSS opacity from images?

As I set up my WordPress website, I decided to use opacity to create a parallax scroll effect. However, the background image shines through even on non-transparent foreground images. This issue is impacting the overall appearance of my website. You can vi ...

cssopacity

Showing ngx-dropdowns within a table while utilizing the overflow visible property

I am experiencing an issue with the NGX dropdown menu within a scrollable table. The problem arises on the last row, where the dropdown is cut off due to the overflow being hidden by default. https://i.sstatic.net/2JfUY.png To address this issue, I appli ...

cssangularoverflowngx-bootstrap

Implement form verification based on PHP database outcome

I have a form that is populated by a database. Currently, I have integrated a jQuery script to ensure that at least one checkbox is selected before submission, and it is functioning as intended. Now, I am looking to add a second feature to the submit funct ...

javascriptphpjqueryhtmlmysql

How do I retrieve a specific object value from a JSON API using an index within a forEach loop in JavaScript?

Over the weekend, I decided to delve into learning how to utilize fetch() APIs. While exploring an interesting API service, I encountered a little hiccup with javascript. The Issue Although I successfully fetched the data from a .Json file, I faced diffi ...

javascripthtmljsonforeach

Problem with the content-editable attribute

My goal is to make each div with the class .edit editable by adding the contenteditable property: $(document).ready(function() { $(".edit").attr("contenteditable", "true"); }); However, after applying this, I found that clicking on a div with content ...

javascriptjqueryhtml

Validation that is discreet and does not rely on data-val attributes, instead focusing on the presence of the "required" class

Below is the code snippet for my current view: @using (Html.BeginForm()) { <div class="left-column"> @Html.LabelFor(m => m.Expression) @Html.TextAreaFor(m => m.Expression, new { @spellcheck = "false" }) @Html.Editor ...

jqueryhtmlrazorjquery-validateunobtrusive-validation

I'm looking for a simple calendar widget that can be clicked on using only plain JavaScript/jQuery and is compatible with Bootstrap

I'm in search of a simple clickable calendar widget to integrate into my website. I am using a combination of HTML, CSS, Bootstrap 5, and jQuery 3.6 for development. The functionality I require is for the calendar days to be clickable so that I can di ...

javascripthtmljquerycalendarbootstrap-5

parallax scrolling can be a bit bumpy

While working on a website, I've incorporated a slight parallax effect that is functioning almost perfectly. However, I've noticed that the foreground divs tend to jump a little when scrolling down the page. At the top of the page, there is a di ...

javascriptjquerycssparallax

Decrease in font size observed after implementing Bootstrap 5

The issue arises when I include the Boostrap CDN link, resulting in a change in font size. I discovered that Bootstrap has a default font size, which is why attempts to adjust it using an external style sheet with !important do not succeed. Interestingly, ...

htmlcssbootstrap-5font-sizecss-specificity

Use the ng-repeat directive to display multiple items and let the user input a quantity for each item. Then, in AngularJs, gather all the form data, including the repeated items and their quantities, and

Hey there! I have a question related to AngularJs: How can I repeat pre-selected items using (ng-repeat) and allow users to enter a quantity for each item in a subsequent step, then submit all the form data? I'm wondering if adding $index to the repe ...

javascripthtmlangularjs

How do I incorporate scrolling into Material-UI Tabs?

I am currently incorporating Material-ui Tablist into my AppBar component. However, I am facing an issue with the responsiveness of the tabs. When there are too many tabs, some of them become hidden on smaller screens. For more information on the componen ...

javascriptcssreactjsmaterial-uitabs

JavaScript - Curious about creating HTML elements

I am working on this code snippet: var add, substract, multiply, divide; var calculation = { add: { place: 2, name: add, calculation: function (a,b) {return a + b;}, output: function (a,b) {return a + ' + ' + ...

javascripthtml

Passing the ID of a span element as an argument to a JavaScript

I'm attempting to develop a JavaScript function in IE that will copy text to the clipboard, but I am running into issues with my current code. Can anyone provide guidance on how I should properly structure my parameters and pass them as arguments? /* ...

javascripthtmlformattingargumentszclip

What is the best way to conceal a sticky footer using another element?

I have a footer that remains fixed at the bottom of both long and short pages. Below is the CSS code for this footer: .footer{ position: absolute; bottom: 0; width: 100%; height: 100px; background-color: white; } My goal is to achieve a 'r ...

jqueryhtmlcssruby-on-rails

Using Javascript to Retrieve Icecast Metadata

I am currently developing a web radio application that utilizes AngularJS and Laravel 5 to read Icecast streams. Currently, I have implemented loading the stream into an html5 audio element which is working well. However, I am facing an issue where the vie ...

javascriptangularjshtmlicecast

Determining the checkbox value in a Django template based on views

I have been working on designing a Django page that functions in the following way. On my "list_books.html" page, all book objects are displayed that are provided to it. I have several functions in views.py that determine which values will be used to dis ...

pythonhtmldjangoview

Tips for choosing a specific cell in a table

I currently have a total of 14 cells that have been generated. Is there a way for me to individually select and manipulate a specific cell out of the 14? I am looking to make only one cell unique, while leaving the rest to be displayed as they are in the ...

javascripthtmlcss

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

javascripthtmlcssfirebasevue.js

Getting values from a textbox in a checkbox using PHP

I need to collect the values from 4 checkboxes, one of them is labeled as Others and has a textbox. The goal is to retrieve all the values that the user has checked and if the user has checked the option labeled as Others, then the values from the textbox ...

javascriptphphtml