1

When I roll over the navbar some (but not all it seems) of the icons jump and the text looks terrible in the transition. Can anyone tell me why they're being jumpy and also how to make the text transition nicely when the navbar is hovered over? Thanks!!!!

I've included the code and what it looks like.

:root {
    --c1: rgb(251, 176, 64);
    --c1-light: rgb(245, 212, 164);
    --c1-dark: rgb(209, 136, 27);
    --c2: rgb(9, 179, 195);
    --c2-light: rgb(85, 197, 209);
    --c2-dark: rgb(0, 190, 205);

    --f1: Poppins;
    --f2: Poppins;
    --f3: Poppins;
    --button-padding: 2px 10px;
    --input_padding: 2px 6px;
    --table-padding: 2px 5px;
}

html {
    font-size: 62.5%;
}

* {
    margin: 0;
    padding: 0;
    font-family: var(--f1), sans-serif;
    font-size: 1.2rem;
}.main {
    margin-left: 5rem;
    padding: 1rem;
}

.navbar {
    position: fixed;
    background-color: rgb(55, 55, 55);
    transition: width 600ms ease;
    top: 0;
    width: 4rem;
    height: 100vh;
    z-index: 100;
}

.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.nav-item {
    width: 100%;
}

.nav-item:last-child {
    margin-top: auto;
}

.nav-link {
    display: flex;
    align-items: center;
    height: 4rem;
    text-decoration: none;
}

.nav-link:hover {
    background: black;
    color: white;
}

.link-text {
    display: none;
    margin-left: 1rem;
    color: grey;
}

.nav-link svg {
    width: 2rem;
    min-width: 2rem;
    margin: 0 1.1rem;
}

.nav-link i {
    font-size: 2rem;
    margin: 0 auto;
    color: grey;
}

.icon {
    width: 4rem;
    text-align: center;
}

.fa-primary {
    color: var(--c1);
}

.fa-secondary {
    color: var(--c1-light);
}

.logo {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--c2);
    background: var(--c2);
    font-size: 2rem;
    letter-spacing: 0.1ch;
    width: 100%;
}

.logo svg {
    transform: rotate(0deg);
    transition: 600ms;
}

.logo-text {
    display: inline;
    position: absolute;
    left: -999px;
    transition: 600ms;
}

.navbar:hover .logo svg {
    transform: rotate(-180deg);
}

.navbar:hover {
    width: 16rem;
}

.navbar:hover .link-text {
    display: inline;
}

.navbar:hover .logo svg {
    margin-left: 13rem;
}

.navbar:hover .logo-text {
    left: 0px;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
            integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
            crossorigin="anonymous"
        />
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
            rel="stylesheet"
        />
        <title>Style Testing</title>
    </head>
    <body>
        <nav class="navbar">
            <ul class="navbar-nav">
                <li class="logo">
                    <a href="#" class="nav-link">
                        <span class="link-text logo-text">Company Name</span>
                        <svg
                            aria-hidden="true"
                            focusable="false"
                            data-prefix="fad"
                            data-icon="angle-double-right"
                            role="img"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 448 512"
                            class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
                        >
                            <g class="fa-group">
                                <path
                                    fill="currentColor"
                                    d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
                                    class="fa-secondary"
                                ></path>
                                <path
                                    fill="currentColor"
                                    d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
                                    class="fa-primary"
                                ></path>
                            </g>
                        </svg>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"><i class="fas fa-home"></i></span>
                        <span class="link-text">Home</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"
                            ><i
                                style="color: var(--c1)"
                                class="fas fa-gavel"
                            ></i
                        ></span>
                        <span class="link-text">Auctions</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"><i class="fas fa-barcode"></i></span>
                        <span class="link-text">Products</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"
                            ><i class="fas fa-mobile-alt"></i
                        ></span>
                        <span class="link-text">Phones</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"><i class="fas fa-cubes"></i></span>
                        <span class="link-text">Purchases</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon">
                            <i class="fas fa-hand-holding-usd"></i
                        ></span>
                        <span class="link-text">Listings</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon">
                            <i class="fas fa-box-open"></i
                        ></span>
                        <span class="link-text">Orders</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"> <i class="fab fa-usps"></i></span>
                        <span class="link-text">Shipping</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon c1">
                            <i class="fab fa-paypal"></i
                        ></span>
                        <span class="link-text">PayPal</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon">
                            <i class="fas fa-calculator"></i
                        ></span>
                        <span class="link-text">Accounting</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon">
                            <i class="far fa-newspaper"></i
                        ></span>
                        <span class="link-text">Reports</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon">
                            <i
                                style="color: var(--c2)"
                                class="fas fa-sign-out-alt"
                            ></i
                        ></span>
                        <span class="link-text">Logout</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="main">

        </div>
    </body>
</html>
  • change ```text-align``` property on .icon to ```margin-left:0.85rem```. It fixes the problem – Mahmood Kiaheyrati Dec 12 '20 at 05:21
  • @Mahmood : When I change that, the icons no longer stay aligned well in the middle. Any ideas about making the text appear more smoothly also as it currently just jumps into the menu on hover and looks bad. –  Dec 12 '20 at 17:23

1 Answers1

0

if you give the .icon a background-color then you'll be able see the problem. its width changes while constantly trying to be centered as the text-align is set to center. that's why it jumped. i set its position to absolute so it doesn't move and change size. you can follow the css comments i have left in the code for more investigations. i also used the help of this Q&A, you can check that out either.

:root {
    --c1: rgb(251, 176, 64);
    --c1-light: rgb(245, 212, 164);
    --c1-dark: rgb(209, 136, 27);
    --c2: rgb(9, 179, 195);
    --c2-light: rgb(85, 197, 209);
    --c2-dark: rgb(0, 190, 205);

    --f1: Poppins;
    --f2: Poppins;
    --f3: Poppins;
    --button-padding: 2px 10px;
    --input_padding: 2px 6px;
    --table-padding: 2px 5px;
}

html {
    font-size: 62.5%;
}

* {
    margin: 0;
    padding: 0;
    font-family: var(--f1), sans-serif;
    font-size: 1.2rem;
}.main {
    margin-left: 5rem;
    padding: 1rem;
}

.navbar {
    position: fixed;
    background-color: rgb(55, 55, 55);
    transition: width 600ms ease;
    top: 0;
    width: 4rem;
    height: 100vh;
    z-index: 100;
}

.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.nav-item {
    width: 100%;
}

.nav-item:last-child {
    margin-top: auto;
}

.nav-link {
    display: flex;
    align-items: center;
    height: 4rem;
    text-decoration: none;
}

.nav-link:hover {
    background: black;
    color: white;
}

/*Changed the link-text to produce a smooth transition as long as transitions doesn't apply to display property*/

.link-text {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 1s ease; 
    margin-left: 4rem; 
    color: grey;
}
/*Added this, so that the company's name doesn't get affected*/
.link-text:first-child {
    margin-left: 1rem;
}
.nav-link svg {
    width: 2rem;
    min-width: 2rem;
    margin: 0 1.1rem;
}

.nav-link i {
    font-size: 2rem;
    margin: 0 auto;
    color: grey;
}

.icon {
    position: absolute; /*fix the jumping icons by positioning them*/
    width: 4rem;
    text-align: center;
}

.fa-primary {
    color: var(--c1);
}

.fa-secondary {
    color: var(--c1-light);
}

.logo {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--c2);
    background: var(--c2);
    font-size: 2rem;
    letter-spacing: 0.1ch;
    width: 100%;
}

.logo svg {
    transform: rotate(0deg);
    transition: 600ms;
}

.logo-text {
    display: inline;
    position: absolute;
    left: -999px;
    transition: 600ms;
}

.navbar:hover .logo svg {
    transform: rotate(-180deg);
}

.navbar:hover {
    width: 16rem;
}

/*changed this according to the peoperties in .link-text*/
.navbar:hover .link-text {
      visibility: visible;
      opacity: 1;
}

.navbar:hover .logo svg {
    margin-left: 13rem;
}

.navbar:hover .logo-text {
    left: 0px;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
            integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
            crossorigin="anonymous"
        />
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
            rel="stylesheet"
        />
        <title>Style Testing</title>
    </head>
    <body>
        <nav class="navbar">
            <ul class="navbar-nav">
                <li class="logo">
                    <a href="#" class="nav-link">
                        <span class="link-text logo-text">Company Name</span>
                        <svg
                            aria-hidden="true"
                            focusable="false"
                            data-prefix="fad"
                            data-icon="angle-double-right"
                            role="img"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 448 512"
                            class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
                        >
                            <g class="fa-group">
                                <path
                                    fill="currentColor"
                                    d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
                                    class="fa-secondary"
                                ></path>
                                <path
                                    fill="currentColor"
                                    d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
                                    class="fa-primary"
                                ></path>
                            </g>
                        </svg>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"><i class="fas fa-home"></i></span>
                        <span class="link-text">Home</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"
                            ><i
                                style="color: var(--c1)"
                                class="fas fa-gavel"
                            ></i
                        ></span>
                        <span class="link-text">Auctions</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"><i class="fas fa-barcode"></i></span>
                        <span class="link-text">Products</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"
                            ><i class="fas fa-mobile-alt"></i
                        ></span>
                        <span class="link-text">Phones</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"><i class="fas fa-cubes"></i></span>
                        <span class="link-text">Purchases</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon">
                            <i class="fas fa-hand-holding-usd"></i
                        ></span>
                        <span class="link-text">Listings</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon">
                            <i class="fas fa-box-open"></i
                        ></span>
                        <span class="link-text">Orders</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon"> <i class="fab fa-usps"></i></span>
                        <span class="link-text">Shipping</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon c1">
                            <i class="fab fa-paypal"></i
                        ></span>
                        <span class="link-text">PayPal</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon">
                            <i class="fas fa-calculator"></i
                        ></span>
                        <span class="link-text">Accounting</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon">
                            <i class="far fa-newspaper"></i
                        ></span>
                        <span class="link-text">Reports</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <span class="icon">
                            <i
                                style="color: var(--c2)"
                                class="fas fa-sign-out-alt"
                            ></i
                        ></span>
                        <span class="link-text">Logout</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="main">

        </div>
    </body>
</html>
Mahmood Kiaheyrati
  • 512
  • 4
  • 14