Question 181310 in Html Question posted in
Some basic documentation can be found here.

Html – How to avoid links shifting on hover while increasing font size in a navigation bar?

i want to create a navigation bar for my website that includes some links and a company logo upon it. The links should have customize spacing in them and means some at first and some at last of right edge . i also want to include an transformation that when the links are hovered the font size of the links increases without affecting or shifting the nearby links or content. i am having a problem as the font increases the neighbours links shifts themselves to maintain margin gap . What should i change or add in my code to do so ?

i basically tried to use hover subclass of link ‘a’. it worked but not perfectly it shift the neighbour links . i am using margin left and right for each link and assigning unique margin for each. when i hover on a link each of the other links shifts themselves to maintain margin respectivley . i think is it good to use margin property in such cases or i should use float if yes then how to align them at particular distances. i am providing an online editor link of my code at end .

Or here is some part of my css code

body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    background-color: #f7f7f7;
    margin: 0;
}

header {
    background-color: black;
}

.navigation-bar {
    width: 100%;
    height: 76px;
    display: flex;
    padding: 10px;
    align-items: center;
}

.logo img {
    position: relative;
    left: 20%;
    height: 80px;
    width: auto;
}

.navigation-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation-links li {
    display: inline-block;
    margin-left: 90px;
    margin-right: 0px;
}

.navigation-links li a {
    font-size: 25px;
    color: white;
    text-decoration: none;
    text-align: center;
}

.navigation-links li a:hover {
    font-size: 30px;
}

/* join now class    */
.navigation-links li a.special1 {
    font-size: 25px;
    font-weight: bold;
    color: white;
    margin-left: 60px;
    margin-right: 0px;
    text-decoration: none;
    border: 2px solid rgb(226, 19, 54);
    border-radius: 50px;
    padding: 15px 10px;
    background-color: rgb(226, 19, 54);
}

/* login class */
.navigation-links li a.special2 {
    font-size: 25px;
    font-weight: bold;
    color: white;
    margin-left: 2px;
    margin-right: 0px;
    text-decoration: none;
    border: 2px solid white;
    border-radius: 50px;
    padding: 15px 40px;
    background-color: black;
}

/*resposive nature*/
@media screen and (max-width: 768px) {
    .navigation-links {
        display: none;
    }
}
<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

    <head>
      <title>Navigation Bar Example</title>
      <link rel="stylesheet" type="text/css" href="styles2.css">
    </head>
    <body>
        <header>
            <div>
                <nav class="navigation-bar">
                    <div class="logo">
                        <img src="rocket-g9cbacc798_1280.png" alt="Company Logo" > 
                    </div>
                    <ul class="navigation-links">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">About</a></li>
                        <li ><a class="special1"href="#">JOIN NOW</a></li>
                        <li ><a class="special2" href="#">LOG IN</a></li>
                    </ul>

                </nav>
            </div>
        </header>
        <!-- Rest of the content -->
    </body>
</html>

code link – https://codepen.io/Divyansh-Sharma-the-flexboxer/pen/JjmgJVy

Tags:

2

Answers


  1. 0

    you can use scale

    .navigation-links li a:hover {
  transform: scale(1.1);
}
    Login or Signup to reply.
  2. 0

    For the links not to affect each other on hover, you have to add a width to the unordered list, like so:

    .navigation-links li {
    width: 90px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search