CODEWITHSUNDEEP
htmlcssdrop-down-menu
Ronny
Ronny

Reputation: 541

Float search bar over menu

i have a theme based on bootstrap 2.2

Now i am customizing it.

When my menubar is scrolled to the top a menubar appears at the top. When you click on the search bar it expands to a with of 200px ... and slides over the menu bar. enter image description here

Now i want the same for the normal menubar. But when it gets to long it jumps under the menubar in stead of sliding over it. enter image description here

How can i change that?

HTML code of the right search bar:

<div class="container">
<div class="row">
<div class="span12">
<nav>
<div id="megamenu">
</nav>
</div>
<div class="spy-left">
<div class="spy-right">
<div class="spyshop">
<div class="shoppingcart">
</div>
<div class="form-search-wrapper">
<form id="form-search-spy" class="form-search" method="get" action="http://h2374118.stratoserver.net/catalogsearch/result/">
<input class="search-query" type="text" name="q" placeholder="Zoeken...">
<button class="btn" onclick="document.getElementById('orm-search-spy').submit()" type="submit">
</form>
</div>

Here is the html code of the menubar which has to be changed:

<div class="container">
<div class="wrapper_w">
<div class="row">
<div class="span12">
<div class="menufront">
<div class="spy-left">
<nav>
<ul class="nav nav-list hidden-desktop">
<div id="megamenu">
<ul id="nav">

... 

<div id="menufront" class="pull-right padding-1">
<div class="form-search-wrapper">
<form id="form-search-spy" class="form-search" method="get" action="http://h2374118.stratoserver.net/catalogsearch/result/">
<input class="search-query" type="text" name="q" placeholder="Zoeken...">
<button class="btn" onclick="document.getElementById('orm-search-spy').submit()" type="submit">
<i class="icon-search-2 icon-large"></i>
</button>
</form>
</div>

etc ...

Piece of the css:

#spy .form-search input.search-query:focus {
    width: 200px !important;
}
#spy .form-search input.search-query {
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.27);
    float: left;
    font-size: 12px;
    height: 24px;
    padding-left: 44px;
    transition: all 0.5s ease 0s;
    width: 49px;
}

#menufront .form-search input.search-query:focus {
    display: inline-block;
    float: left !important;
    visibility: visible !important;
    width: 140px !important;
}
#menufront .form-search input.search-query {
    width: 100px !important;
}

Who can help me?

Upvotes: 4

Views: 3570

Answers (3)

Sleek Geek
Sleek Geek

Reputation: 4686

Use absolute positioning; then use property values of top , right and z-index to get desired effect.

you-search-bar {
   position: absolute;
   right: 0; /* adjust as needed */
   top: -25px; /* Adjust as needed to get the number that will keep it above the menu */
   z-index: 999; /* Whatever number that keeps it above the menu */
}

Note: As mentioned by Shipow, the parent needs to have a position value of relative.

Upvotes: 2

Shipow
Shipow

Reputation: 2447

You can move it via the position: relative in your css

#spy .form-search input.search-query:focus {
  width: 200px !important;
  position: relative;
  top: 30px;
}

Upvotes: 0

Casey Rule
Casey Rule

Reputation: 2085

You'll need to set the float rule in the CSS for that element to:

float: clear

You may have to do some other positioning to get things to look correct after that, but it's difficult to be more specific with seeing the code in action.

Upvotes: 0

Related Questions