Position: absolute messes up a:hover

Question

I'm trying to center the search bar in the footer. After using the solution from: [https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-and-right-aligned-items][1] I have found that the style for left group of buttons doesn't really work anymore: When I hover over them the css for a:hover doesn't get applied if the cursor is in the middle of the button, but gets applied if the cursor is near the edges. Commenting out the line position: absolute fixes the problem, but then of course the searchbar isn't centered anymore. It is a subtle but annoying problem.

HTML:

    <header>
    <nav class="navbar navbar-default">
    <a class="navbar-brand" href="#">Brand</a>
        <ul class="nav navbar-nav pull-left">
            <li><a href="#">
                <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
            </a></li>
            <li><a href="#">
                <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
            </a></li>
            <li><a href="#">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            </a></li>
        </ul>
    
        <form class="navbar-form" role="search">
            <div class="form-group">
                <input type="text" class="form-control input-sm" placeholder="Search">
                <button type="submit" id="navbar-search-button" class="btn btn-default btn-sm">
                    <span class="glyphicon glyphicon-search" aria-hidden="true">
                </span>
            </button>
            </div>
        </form>
    
        <ul class="nav navbar-nav pull-right">
            <li><a href="#">
                <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
            </a></li>
            <li><a href="#">
                <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
            </a></li>
        </ul> 
    </nav>
    </header>

CSS:

    header {
        background-color: #194969;
        border: 0;
    }
    .navbar {
        margin: 0 !important;
        padding: 0 !important;
        height: 3em !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: inherit !important;
    }
    .navbar .navbar-form {
        margin-top: 0.75em !important;
    }
    .navbar > a {
        color: #eee !important;
    }
    .navbar li > a {
        margin: 0 !important;
        background-color: #194969;
        color: #eee !important;
        width: 4em;
        text-align: center;
    }
    .navbar li > a:hover {
        border-radius: 0 0 0 0 !important;
        margin: 0 !important;
        color: #194969 !important;
        background-color: #eee !important;
        height: auto !important;
    }
    #navbar-search-button {
        color: #194969;
    }
    .navbar-form
    {
        position: absolute;
        width: 100% !important;
        left: 0;
        text-align: center;
    }

The line in question is position:absolute applied to .navbar-form. EDIT: screenshots for clarity: https://i.stack.imgur.com/cI5xu.jpg. [1]: Bootstrap NavBar with left, center or right aligned items

could you create a codepen ? you can select bootstrap from settings on codepen and then add your code. — AmitJS94, Mar 10 '16 at 10:37
In the future, please post a JSFiddle. [I made one for you](https://jsfiddle.net/n6shespx/) — Kaspar Lee, Mar 10 '16 at 10:37
A more complete example would be nice, yes. I cant get Druzion's fiddle to demonstrate the issue. — Mr Lister, Mar 10 '16 at 10:51
try to hover over left 3 buttons, colors don't change unless you're pretty much on the edge, then try to hover on right 2 buttons, and there everything is fine, it's visible in the Fiddle — krsnik93, Mar 10 '16 at 10:59

score 1 · Accepted Answer · answered Mar 11 '16 at 08:57

Oh my goodness. First, change all your .navbar to .navbar-nav in your CSS and try to get rid of those importants!

Next, you have a width off 100% on your form, which means that element, while invisible, is covering up the middle of your icons, making them not clickable (because you're hovering over the form.)

So, take all your <li>s or <a>s (not both, please. Test with one and see if it works) and put a position:relative and possibly a z-index of 2 on them. That should move them on top of your absolutely positioned element. Don't put any top, bottom, left or right on the position: relative elements.

If you make a codepen, I'll do it for you.

score 0 · Answer 2 · edited Mar 31 '22 at 20:21

0

Try something like this, only you have to deal with responsive now

https://jsfiddle.net/DTcHh/18138/

.form-header{
    text-align: center; 
}

edited Mar 31 '22 at 20:21

Roberto Rossini

158
2
10

answered Mar 11 '16 at 08:09

Miomir Dancevic

6,726
15
74
142

Position: absolute messes up a:hover

2 Answers2