Nav item has weird effect on hover

This particular item in my navigation menu runs into its sibling despite the negative left margin I give it but funny enough, when I hover over this element or try to alter its position in dev tools, it regains its normal positioning. Same thing happens if I try to shift the next sibling a step further. I’ve tried using floats and setting the relative parent to the li element itself. I also tried triggering hover on document.ready, none of them seems to help my cause.

Running the markup and stylesheets through validators give me no errors so I’m convinced what is going on must be from my logic. Fiddle here https://jsfiddle.net/3kode6e3/1/

PS: Just in case you’re wondering, the styling for that element must be inline as I neither know what future markups might need it nor can begin to edit the files that currently need it.

made a few changes that seems to have fixed what your talking about. There’s still some ugly shifts on hover.

<li>
<a href="/my-site/notifications/" style="position: relative; padding-left: 35px !important; margin-left: 5px;width:120px;">Notifications <span id="notifsCount" style="position: absolute;top: 0;left: 0;padding: 8%;background: white;color: lightskyblue;transition: inherit;"> 2 </span> </a>
</li>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: white;
}

body {
    background-color: lightskyblue;
    color: #f5f5f5;
    font-family: sans-serif;
}

header {
    min-height: 520px;
    width: 100%;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 2%;
}

header h1 {
    font-size: 350%;
    text-transform: uppercase;
}

#header-h1-small {
    font-size: medium;
}

nav {
    flex: 0 40%;
    font-size: 90%;
}

nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    padding-top: 20px;
}

nav ul li {
    list-style: none;
}

nav ul li a {
    border: 1px solid;
    transition: all .45s ease-in-out;
    white-space: nowrap;
    padding:12px !important;
}

nav ul li a:hover {
    background: white;
    border: 1px solid transparent;
    color: #0982af;
    transition: all .2s ease-in-out;
}
1 Like

Maybe you should set up a fiddle that shows the ugly shifts because I can’t reproduce them over here.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.