How to make text not move around after adding border

Question

I want to make a navigation bar that upon hovering, adds a border to it. The problem is every time the border is added/removed, the text will shift slightly. Is there anyway I can solve this?

function toHomePage(){
    window.location.replace("...");
};
$(document).ready(function(){
    $(".navBar").mouseenter(function() {
        $(this).css("border","2px solid black");
    }).mouseleave(function() {
        $(this).css("border","none");
    });
})

.navBar{
    display: flex;
    position: sticky;
    top:0;
    padding: 20px;
    border: none;
    width: 100%;
    justify-content: center;
    background-color: gainsboro;
    z-index: 2;
    
 }
 #Title{
     color: black;
     font-family: monospace;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Help.css">
    <title>Help</title>
</head>
<body>
    <div class="navBar" onclick="toHomePage()">
        <div>
            <h1 id="Title">SomeRandomWebsite</h1>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="Help.js"></script>
</body>
</html>

Dominik · Accepted Answer · 2021-02-18T06:22:56.600

Instead of adding a border, just change the color of the border.

function toHomePage(){
    window.location.replace("...");
};
$(document).ready(function(){
    $(".navBar").mouseenter(function() {
        $(this).css("borderColor","black");
    }).mouseleave(function() {
        $(this).css("borderColor","gainsboro");
    });
})

.navBar {
    display: flex;
    position: sticky;
    top:0;
    padding: 20px;
    border: none;
    width: 100%;
    justify-content: center;
    background-color: gainsboro;
    z-index: 2;
    border: 2px solid gainsboro;
}
 #Title {
     color: black;
     font-family: monospace;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Help.css">
    <title>Help</title>
</head>
<body>
    <div class="navBar" onclick="toHomePage()">
        <div>
            <h1 id="Title">SomeRandomWebsite</h1>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="Help.js"></script>
</body>
</html>

Note: You can also use the outline property which will not make a change to the box model.

I'm sure you have your reasons for using js for this but the CSS :hover pseudo class is a better way for doing this. Also using an HTML anchor is a better device to link to things. I just leave this here for prosperity.

.navBar {
    display: flex;
    position: sticky;
    top:0;
    padding: 20px;
    border: none;
    width: 100%;
    justify-content: center;
    background-color: gainsboro;
    z-index: 2;
    border: 2px solid gainsboro;
    text-decoration: none;
}
.navBar:hover {
    border-color: black;
}
 #Title {
     color: black;
     font-family: monospace;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Help.css">
    <title>Help</title>
</head>
<body>
    <a href="#0" class="navBar">
        <div>
            <h1 id="Title">SomeRandomWebsite</h1>
        </div>
    </a>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="Help.js"></script>
</body>
</html>

score 0 · Answer 2 · answered Feb 18 '21 at 06:33

In addition to Dominik's answer, you can also use a box-shadow.

function toHomePage(){
    window.location.replace("...");
};
$(document).ready(function(){
    $(".navBar").mouseenter(function() {
        $(this).css("box-shadow","0px 0px 0px 1px black");
    }).mouseleave(function() {
        $(this).css("box-shadow","none");
    });
})

.navBar{
    display: flex;
    position: sticky;
    top:0;
    padding: 20px;
    border: none;
    width: 100%;
    justify-content: center;
    background-color: gainsboro;
    z-index: 2;
    
 }
 #Title{
     color: black;
     font-family: monospace;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Help.css">
    <title>Help</title>
</head>
<body>
    <div class="navBar" onclick="toHomePage()">
        <div>
            <h1 id="Title">SomeRandomWebsite</h1>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="Help.js"></script>
</body>
</html>

score 0 · Answer 3 · answered Feb 18 '21 at 06:35

I think you can handle only from the css as example below:

p.solid {border:1px solid transparent;}
p.solid:hover {border:1px solid #0f0;}

<p class="solid">A solid border.</p>

In your example you can use border with full border-width but we need to add transparent color:

function toHomePage(){
    window.location.replace("...");
};
$(document).ready(function(){
    $(".navBar").mouseenter(function() {
        $(this).css("border","2px solid black");
    }).mouseleave(function() {
        $(this).css("border","2px solid transparent");
    });
})

.navBar {
    display: flex;
    position: sticky;
    top:0;
    padding: 20px;
    border: 2px solid transparent;
    width: 100%;
    justify-content: center;
    background-color: gainsboro;
    z-index: 2;
    border: 2px solid gainsboro;
}
 #Title {
     color: black;
     font-family: monospace;
}

How to make text not move around after adding border

3 Answers3