rearranging the positioning of links in the HTML navbar

Is there a way to prevent other links in the navbar from moving up slightly when hovering over one link and creating a line (border bottom)?

`

.n24{

    margin-top: 2px;
    padding: 14px 14px;
}
.n25{

    margin-top: 2px;
    padding: 14px 14px;
}
.n26{

    margin-top: 2px;
    padding: 14px 14px;
}
.n09{

    margin-top: 2px;
    padding: 14px 14px;
}



.n24:hover{

    border-bottom: #00b3ee 5px solid;
    margin-top: 7px;
}
.n25:hover{

    border-bottom: #00b3ee 5px solid;
    margin-top: 7px;
}

.n26:hover{

    border-bottom: #00b3ee 5px solid;
    margin-top: 7px;
}

.n09:hover{

    border-bottom: #00b3ee 5px solid;
    margin-top: 7px;
}
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <a class="navbar-brand" href="#"><img src="img.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link n22" href="#" style="color: black; font-weight: bold; font-size: 15px">HOME<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link n23" href="#" style="color: black; font-weight: bold; font-size: 15px">ABOUT US</a>
            </li>
            <li class="nav-item">
                <a class="nav-link n24" href="#" style="color: black; font-weight: bold; font-size: 15px">OUR SERVICES</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link n25"  href="index7.html" style="color: black; font-weight: bold; font-size: 15px">
                    JOBS
                </a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link n09"  href="#" style="color: black; font-weight: bold; font-size: 15px">
                    CONTACT US
                </a>
            </li>
        </ul>
    </div>
</nav>

htmlcss

Answer №1

The reason this occurs is because a border takes up space between the element being hovered over and the one below it. When there isn't enough room for the border, it shifts the elements to accommodate it.

To work around this issue, you have a couple of options. One solution is to use a transparent border as the default state, so that when hovering, the space for the border is already accounted for (refer to the `.first` solution).

Alternatively, you can utilize a pseudo-element like `:after` to create the border. By using `position:absolute`, the pseudo-element does not take up any space and therefore does not affect the positioning of your elements (refer to the `.second` solution).

ul.first li { 
   border-bottom: 10px solid transparent;
}
ul.first li:hover {
  border-bottom-color: red;
 }

ul.second li:hover:after {
  content:'';
  width: 100%;
  height: 5px;
  position: absolute;
  background:red;
  bottom: -5px;
  left:0;
  display: block;
}
ul.second li {
  position:relative;
  margin-bottom:5px;
 }
<ul class="first">
  <li>Link1</li>
  <li>Link2</li>
  <li>Link3</li>
</ul>

<ul class="second">
  <li>Link1</li>
  <li>Link2</li>
  <li>Link3</li>
</ul>

Answer №2

input your code here

.nav-link { display: block; }

.n24{

    margin-top: 2px;
    padding: 14px 14px;
    border-bottom: transparent 5px solid;
}
.n25{

    margin-top: 2px;
    padding: 14px 14px;
    border-bottom: transparent 5px solid;
}
.n26{

    margin-top: 2px;
    padding: 14px 14px;
    border-bottom: transparent 5px solid;
}
.n09{

    margin-top: 2px;
    padding: 14px 14px;
    border-bottom: transparent 5px solid;
}
.nav-link { display: block; }


.n24:hover{

    border-bottom: #00b3ee 5px solid;
}
.n25:hover{

    border-bottom: #00b3ee 5px solid;
}

.n26:hover{

    border-bottom: #00b3ee 5px solid;
    
}

.n09:hover{

    border-bottom: #00b3ee 5px solid;
}
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <a class="navbar-brand" href="#"><img src="img.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link n22" href="#" style="color: black; font-weight: bold; font-size: 15px">HOME<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link n23" href="#" style="color: black; font-weight: bold; font-size: 15px">ABOUT US</a>
            </li>
            <li class="nav-item">
                <a class="nav-link n24" href="#" style="color: black; font-weight: bold; font-size: 15px">OUR SERVICES</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link n25"  href="index7.html" style="color: black; font-weight: bold; font-size: 15px">
                    JOBS
                </a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link n09"  href="#" style="color: black; font-weight: bold; font-size: 15px">
                    CONTACT US
                </a>
            </li>
        </ul>
    </div>
</nav>

Answer №3

Give this code a shot:

#navbarNavDropdown ul.navbar-nav {
    display: block;
} 

#navbarNavDropdown ul.navbar-nav li.nav-item {
    margin-top: 7px;
}

#navbarNavDropdown ul.navbar-nav li.nav-item a {
    border-bottom: transparent 5px solid;
    display: inline-block;
    padding: 14px 14px;
}

#navbarNavDropdown ul.navbar-nav li.nav-item a:hover {
    border-bottom: #00b3ee 5px solid;
}

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

Guide on inserting HTML text box form input into Express route parameter

I'm currently working on implementing a feature that allows users to search through my mongo database using an endpoint structured like this: app.get('/search/:input', function(req, res){ console.log(`get request to: /members/${req.params ...

javascripthtmlnode.jsmongodbexpress

Using JQuery to Identify the Clicked Div Container

Currently working on a JQuery script to determine which specific div box was clicked, but running into some issues. I understand that there are other approaches to achieve this by directly invoking functions upon clicking a div box, but I want to first ide ...

javascriptjqueryhtml

Ways to ensure the background color stretches the entire length of the page

I've been attempting to create a background image or color that extends across the entire main content area, but haven't had any success so far. For reference, please visit My attempts have involved adding a class called fill to the container-f ...

htmlcsstwitter-bootstrap

Navigating a collection of objects in JavaScript: A step-by-step guide

My data consists of objects in an array with the following structure: [{\"user\":\"mcnewsmcfc\",\"num\":11},{\"user\":\"ManCityFNH\",\"num\":7}]; To clean up the array, I'm using this code: ...

javascripthtmlarrays

Struggling to incorporate JSON data and javascript functions into an HTML file

I've been struggling to create a feed from a json link and display it in separate divs within an html document. Despite multiple attempts with different approaches for three different newspaper sources, I have not been successful. I'm hoping som ...

javascripthtmljson

What steps should I take to modify my database while utilizing radio buttons in the edit mode?

I am experiencing an issue with the radio button functionality. When creating a new user.jsp, I am able to successfully add the value from the radio button to the database. However, when I attempt to edit the values in the jsp, the changes do not reflect i ...

javascriptjqueryhtmljsp

Is it feasible for a JavaScript function to receive the innerHTML of the element from which it is invoked as an argument?

Is there a way to bind a function that takes a String as a parameter to a button so that it is called onclick and takes the innerHTML of the element as a parameter, without assigning the button an id or using queryselector? <button onclick="myFunct ...

javascripthtml

Transform the Bootstrap container to fill the entire height of the browser

How can I make the container height 100% of the browser without breaking the contents inside? html, body { height: 100%; min-height: 100%; } .container { min-height: 100%; height: 100%; background-color:red; } <div class="contai ...

htmlcsstwitter-bootstraptwitter-bootstrap-3height

Sending a variable to the resize() function in jQuery

Currently, I am working with two specific divs in my project: "#sidebar-wrapper" and ".j1". The height of ".j1" is dynamic as it changes based on its content. My objective is to set this height value to the "#sidebar-wrapper" element. I have attempted to ...

javascriptjqueryhtmlcss

Tips for removing borders around a textbox with a background image: When incorporating a background image into a

After removing the default borders on a textbox using outline:none;, I noticed that adding a background image caused the border to reappear, and I couldn't get rid of it! How can I solve this issue? Here is the code for the textbox: <input type = ...

htmlcss

The nested navigation link disappears suddenly on Internet Explorer 9

This query closely resembles another issue: Nested menu keeps vanishing on IE 8 & 9. However, the solution provided is quite limited. Why do my nested menus disappear before I can reach them with my cursor unless I move it swiftly? This peculiar behavi ...

cssinternet-explorer-9nav

Upon hitting submit, the form remains unresponsive

I have been developing a permissions system for my NodeJS project (Using the SailsJS MVC) and encountered an issue. After resolving my initial error as detailed here, I am now facing a problem where the form is unresponsive. It neither shows an error in th ...

javascripthtmlangularjsnode.jssails.js

The Angular Material table does not adapt to different screen sizes

I developed an Angular application using Angular Material that features a table with 22 columns. However, when I expand the browser window, some columns are hidden. Additionally, on mobile browsers, not all columns are displayed. I have attempted the follo ...

cssangularangular-material

What is preventing this brief code from functioning properly? I am trying to extract a value from an input field and add it to a div element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="//ajax.googleapis.com/ajax/libs/jque ...

javascriptjqueryhtml

Unable to generate dynamic HTML through AJAX request

I made an Ajax API call and received the response in JSON format. I need to create dynamic HTML to display each value in HTML elements. I tried getting the response from the API but couldn't generate the HTML. Can someone assist me with this? Also, I ...

javascriptjqueryhtmlajaxapi

Here's a unique rewrite: "Learn how to manipulate the CSS class of a textarea element (specifically in NicEdit) by utilizing the addClass

I am currently validating a textarea using the NicEdit plugin. var getContent = nicEditors.findEditor("SubSliderDescription").getContent(); bValid = bValid && checkBlankTextArea(getContent, "SubSliderDescription") function checkBlankTextArea(o, ...

javascriptjqueryhtmlcssnicedit

Providing data from a javascript xml file upon page initialization

I am aiming to extract multiple values from an XML file as soon as an HTML page is loaded. The XML file remains constant and will not change over time. It will be stored in the same directory as the HTML page. The purpose of this XML file is to fill severa ...

javascripthtmlxmlajax

Unable to transmit a variety of text or variables via email through PHP

Can someone assist me in figuring out how to send more content in an email? I have been attempting to include additional information in the email, but haven't been successful. I am using ajax to call and send the email, however, only basic emails seem ...

phphtmlcssajaxemail

How can I make two lines equal in length by stretching them?

Looking to replicate the design shown in the image below using CSS: https://i.stack.imgur.com/cZiFT.png It's crucial for me that both lines are of equal length: https://i.stack.imgur.com/8phWR.png I attempted to recreate it with the following code ...

css

Guide to utilizing a download link for file retrieval in Python

I'm currently working on creating a script that can automatically download specific files from webpages and save them to designated folders. For the most part, I've been successful in achieving this using Python, Selenium, and FirefoxPreferences ...

htmlpython-2.7selenium-webdriverdownload