Border shifts on hover effect

After much trial and error, I finally managed to center two links in a nav bar perfectly on the page. I also added a grey bottom border that spans the entire width of the page, with the hover effect turning it blue under the links. Check out this example:

example

Here is the HTML I used:

<div class="topnav">
    <a class="accommodations" href="#accommodations">Accommodations</a>
    <a class="activities" href="#activities"> Activities </a>
</div>

And here is the CSS for mobile devices:

.topnav {
    padding-top: 17px;
    border-bottom: solid 3px #808080;
    text-align: center;
    display: flex;
    border-top: none;
    padding-bottom: 10px;
}

.topnav a {
    width: 50%;
    padding-top: 17px;
    border-top: none;
}

.topnav a:hover {
    padding-top: 17px;
    border-top: none;
    border-bottom: solid 3px #0065fc;
    padding-bottom: 10px;
}

However, when I add the hover effect, the blue bar seems to overlap the grey one instead of replacing it. The padding on top is necessary on desktop dimensions to create space between the words and the bar, but without it, the words shift when hovered over.

I've tried adjusting padding, adding borders individually, and playing with margins, but nothing has worked so far. Adding individual borders did make the hover work as intended, but there was still an odd gap on the right after "Activities."

Just to give you some context, I only have about a month's worth of coding experience, mainly self-taught through books and online resources. Any help would be greatly appreciated!

--update-- Removing the border from .topnav and applying it individually did solve the hover issue, but the border doesn't extend to cover the full page, leaving a weird gap on the right side after "Activities."

---update#2-- Thank you all for your incredible input! By combining everyone's suggestions, the hover effect now works flawlessly with no errors or issues!

Answer №1

Set the border-bottom style for a tags instead of using the .topnav class, and adjust the color when hovered over.

.topnav {
  display: flex;
  text-align: center;
}

.topnav a {
  width: 50%;
  padding-top: 34px;
  padding-bottom: 10px;
  border-bottom: solid 3px #808080;
}

.topnav a:hover {
  border-bottom-color: #0065fc;
}
<div class="topnav">
  <a class="accommodations" href="#accommodations">Accommodations</a>
  <a class="activities" href="#activities"> Activities </a>
</div>

Answer №2

Consider implementing a style like the following for your navigation bar:

.nav-container {
    border-bottom: solid 3px #808080;
    width: 100%;
}

.topnav {
    padding-top: 17px;
    text-align: center;
    display: flex;
    max-width: 1200px; /* Adjust as needed */
    margin: auto;
}
  
.topnav a {
    width: 50%;
    padding-bottom: 10px;
    padding-top: 17px;
    border-top: none;
}

.topnav a:hover {
    border-bottom: solid 3px #0065fc;
    margin-bottom: -3px;
}

When structuring your HTML, you can use the following code snippet:

<div class="nav-container">
  <div class="topnav">
    <a class="accommodations" href="#accommodations">Accommodations</a>
    <a class="activities" href="#activities"> Activities </a>
  </div>
</div>

Answer №3

One technique involves utilizing grid layout, allowing elements to expand to fill the available space while giving each a border that changes appearance on hover.

Your .topnav element would be better suited as a <nav> instead of a div, which I have updated here. It is common practice to structure navigation menu items within a list and style them accordingly, though I have maintained the existing structure in this example.

Here is a demonstration with accompanying comments:

.topnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
  gap: 0;
}

.topnav a {
  border-bottom: 3px solid red;
  width: 100%;
  text-align: center;
  outline: 1px solid lime;
  padding-block: .5em;
  padding-inline: 1em;
}

.topnav a:hover {
  border-color: blue;
}
<nav class="topnav">
    <a class="accommodations" href="#accommodations">Accommodations</a>
    <a class="activities" href="#activities"> Activities </a>
</nav>

Answer №4

If you're looking to add some flair to your cards, why not give this animated border effect a try? Utilizing Tailwind CSS, you can easily create a card with a colorful, dynamic border that is sure to catch the eye.

CDN Link

<script src="https://cdn.tailwindcss.com"></script>

<!-- Include the Tailwind CSS and Animate.css links in your HTML file, if you haven't already -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593d2830312638312b3c2f1426716478736768">[email protected]</a>/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

CSS

<style>
    @keyframes neon-border-animation {

        0%,
        100% {
            border-color: #00899e;

        }

        50% {
            border-color: #35c1ff;

        }
    }

    .neon-border {
        animation: neon-border-animation 2s infinite;
        box-shadow: 0 0 10px #00b8d4;
    }



    .card.neon-border:hover {
        border-image: linear-gradient(45deg, #b300ff, #ff00ff, #ff6f00);
        border-image-slice: 1;
    }

    footer {
        / position: fixed;/ left: 0;
        bottom: 0;
        width: 100%;
        background-color: #1a202c;
        padding: 1rem;
        color: #ffffff;
    }
</style>

HTML

<div class="card bg-zinc-700 border-2 border-transparent  shadow-md p-3  neon-border max-w-xs">
    <div class="flex items-center mb-3">
        <div class="rounded-md bg-white p-1 mr-3">
            <img src="images/Rabort.png" alt="artists" class="w-10 h-10 object-cover rounded-md">
        </div>
        <div class="flex flex-col items-start">
            <div class="text-left">
                <p class="text-white font-bold">@Devid_Miller</p>
            </div>
            <div class="text-left">
                <p class="text-green-500 font-bold text-lg">14.55 ETH</p>
            </div>
        </div>
    </div>
</div>

This unique design element is a fun way to enhance your website's visuals. Give it a try and see how it transforms your content!

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

Flexbox presenting a specific alignment issue

I'm facing a challenge using Flexbox to achieve the desired result shown below When trying to position my 2 blocks on the right, one of them ends up crossing the line and I struggle to bring it back up. I want this layout to be managed dynamically i ...

Exploring the world of using Bootstrap containers, rows, and columns

I have a good grasp on containers and columns, but I am a bit confused about rows. The example below shows a 50/50 split. <div class="container"> <div class="row"> <div class="col-md-6"> 50 / 50 Content </ ...

How can you easily ensure your React web app is responsive?

As I delve into building a web app using reactjs, one particular challenge I encounter is ensuring its responsiveness. An issue arises when the browser size changes, causing my components to overlap and lose alignment. Is there an easy solution to preven ...

Scaling the ion-spinner to fit your specific needs

In my Ionic application, I am utilizing the ion-spinner. However, I have encountered an issue with resizing the spinner. While custom CSS works well with default spinners, it does not function properly with Bubbles, Circles, and Dots spinners. CSS .spin ...

Developing several sliders and ensuring they operate independently of each other

I am currently in the process of developing multiple sliders for a website that I am building. As I reach the halfway point, I have encountered a problem that has stumped me. With several sliders involved, I have successfully obtained the length or count ...

Vanilla JavaScript: toggling text visibility with pure JS

Recently, I started learning javascript and I am attempting to use vanilla javascript to show and hide text on click. However, I can't seem to figure out what is going wrong. Here is the code snippet I have: Below is the HTML code snippet: <p cla ...

Having trouble making z-index work on a child div with absolute positioning

I am attempting to design a ribbon with a triangle div positioned below its parent div named Cart. <div class="rectangle"> <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0"> & ...

Tips for adding a red dot at the top-right corner of a necessary HTML input label, similar to an asterisk

Is there a way to replace the asterisk with a dot in an HTML label for a required input? The dot should be positioned in the top-right corner similar to where the asterisk would typically be. ...

The width specified for the table is not being applied

I've been struggling to adjust the width of my table in order to display data from a database. I've tried using inline width, !important tag, id, and class but none have worked. Interestingly, when I apply a fixed width without dynamic data, it w ...

The Laravel error message "Attempting to access 'index()' on a null object"

After generating a model in Laravel, I attempted to migrate the table using 'php artisan migrate', but encountered an error message on the terminal: "Call to a member function index() on null" ...

Navigate to a specific section of a webpage with automatic scrolling

I'm developing a Chrome App and incorporating the web view tag, which functions similarly to an iframe. Is there a way to load a webpage inside the web view halfway down the page? I have attempted the following: application.js: $(document).ready(f ...

Issue with HTML CSS: There is a gap between the words "Get" and "started", causing "get" to appear on

Greetings, it appears I am encountering an issue with my website. When I refer to "Get Started," it displays as "GetStarted." However, when I insert a space between "Get" and "started," it separates onto two lines as "Get" on the first line and "started" o ...

What is the best way to eliminate the space between two buttons in a table row or "column"?

Below is the code snippet that I am working with. I am trying to figure out a way to eliminate the space between the buttons both horizontally and vertically. Can someone guide me on how to achieve this? <%@page contentType="text/html" pageEncodin ...

Tips for implementing a CSS Flexbox layout with varying div heights

I am working on a page that features five unique panels, each with its own distinct height and width. I have been considering implementing CSS Flexbox to ensure these panels stack properly as the page becomes responsive. However, one major issue I've ...

Incorporate functionality into a button using jQuery

I am working on a table that displays data in different levels (Parent, Child, Grandson). When I click on the parent row, it expands to show new rows related to the child level. Similarly, clicking on a child row reveals a third level known as the grandson ...

Tips for adjusting column positions in a table while maintaining a fixed header and utilizing both horizontal and vertical scrolling

Is there a way to display a table that scrolls both horizontally and vertically, with the header moving horizontally but not vertically while the body moves in both directions? I have been able to shift the position of the columns, however, I am struggling ...

Increase the options available in the dropdown menu by adding more selected items, without removing any already selected

I came across this code on the internet http://jsfiddle.net/bvotcode/owhq5jat/ When I select a new item, the old item is replaced by the new item. How can I add more items without replacing them when I click "dropdown list"? Thank you <select id=&qu ...

Viewing HTML web pages using Mozilla Firebox

Printing an HTML table with lots of content has been a challenge for me. Google Chrome didn't work, so I switched to Mozilla Firefox. However, now Firefox is breaking the page inside the table. My question is how can I trigger print preview in Firefox ...

The main menu vanishes when you hover over it after the affix class is activated

I am currently working on creating a horizontal dropdown menu that expands on mouseover and collapses on mouseout under one of the main menu items. The functionality of this effect is working fine, except for one issue. When I scroll down and activate the ...

Achieving a dynamic "Picture Presentation" feature with JavaScript/jQuery

Currently, I am in the process of developing a website that will serve as a presentation. My plan is to create a slideshow effect using JavaScript. While I have implemented some functions, I must admit that it is not very organized at the moment. The main ...