CSS hover over search bar width

[anthecoldplayer]

On our website, mcgillsbr.ca, we have a search icon in the nav bar – no matter what we do the highlighted part when we hover over doesn’t stretch across the entire blank space. Can anyone help us with that? Thanks! Here’s the CSS for the searchbar so far

#menu-main-menu > li > form > label > input, #menu-main-menu > li > form > label > input:focus, #menu-main-menu > li > form > label > input:hover {
background-color: transparent !important;
height: 100% !important;
display: block;
width: 100%;
border: none;
background: url(http://www.books360degree.com/home/img/home/search.png) no-repeat scroll 7px 7px;
background-size: 20px 20px;
padding-left:0px;
outline-width: 0;
}

[Paulie_D]

Well it is a fixed width as stated in a couple of places.

#menu-main-menu > li > form > label > input,
#menu-main-menu > li > form > label > input:focus, 
#menu-main-menu > li > form > label > input:hover {
    width: 145px !important;
    max-width: 145px !important;
    min-width: 145px !important;
}

@media (min-width: 981px)
#menu-main-menu > li > form > label > input, 
#menu-main-menu > li > form > label > input:focus, 
#menu-main-menu > li > form > label > input:hover {
    width: 145px !important;
    max-width: 145px !important;
    min-width: 145px !important;
}

[Author]

Posts