Can't seem to get the search bar to sit right with my template

I have recently installed and configured a little of the algolia search and found it great and easy to use however I’m stuck as the template doesn’t load the search bar correctly and I would like a bit of help with regards of which files to edit etc.

The mega menu sits on top constantly and blocks the results a little and also the search title and magnifying glass don’t seem to line up once the page loads fully.

I’m currently using magento 1.9.2

[heres my home page](https://ashtondisc.co.uk/)

Hello @adw-online,

I checked your website and it looks like CSS issue - align the magnifying glass and change z-index of the autocomplete menu.
All information about how to customize the autocomplete menu you can find here: https://community.algolia.com/magento/doc/m1/customize-autocomplete/

Let me know if you’ll need more help.

what should I set the z-index to? and how do I go about aligning the magnifying glass? If you could just give me a few tips I should be able to have a go at it :slight_smile:

I had a go at changing the code for the drop down menu to this:

#algolia-autocomplete-container .aa-dropdown-menu {
  position: absolute;
  margin-top: -1px;
  right: 0px;
  width: 100%;
  z-index: 10000000 !important;
  border: 1px solid #BBB;
  border-top: 3px solid #8EB4D0;
  border-radius: 1px;
  background: white;
}    

This is the css that was set to the megamenu

.grid-full  li.parent:hover > .level-top {
  left: 0px;
  z-index: 99999;
}
}
.grid-full .level-top .level2.column2{
    background: #ffffff;
    float: left;
    margin-left: 135px;
    margin-top:0px;
    position: absolute !important;
    z-index: 9999999;
    width: 756px;
    border: 1px solid #dce1e6;
    display: none;
    left: 0;

Ths z-index on the megamenu were all set to 99999999

It still isn’t working and still shows it behind the megamenu

Hello @adw-online,

it looks alright. But I’m not able to investigate on your website.
Can you change the debug parameter of autocomplete menu to true? It’ll then let you investigate on the menu (it won’t disappear) and will help you investigate what is going on there.

I’ve set the debug parameter and its showing this an extra

<div id="algolia-searchbox">
            <label for="search">Search:</label>
            <span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;" id="algolia-autocomplete-tt"><input id="search" type="text" name="q" class="input-text algolia-search-input aa-input" autocomplete="off" spellcheck="false" autocorrect="off" autocapitalize="off" placeholder="Search for products, categories, ..." role="combobox" aria-autocomplete="list" aria-expanded="false" aria-labelledby="search" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre></span>
            <span class="clear-cross clear-query-autocomplete"></span>
            <span id="algolia-glass" class="magnifying-glass" width="24" height="24"></span>
        </div>

I have figured out its showing this bit of extra code before the closing. Is this suppose to be here?

<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>