How to reposition search pop up.

How do I reposition the search pop up from the top of my page to under the navigation bar. Like that of you guys

This is where mine is

I would also like a box shadow with it. Please and thank you! 

When I visited the forum in your profile, the search pop up was under the navigation menu.

I just checked my forum in another browser (internet explore) and the search pop up did appear under the nav menu, not only that but a number of the forum's appearance seems off as well which is so weird . Why is that? 

Each browser is different. Also browser versions can be different. The reason why somethings look different in different browser is because different browsers support different things.

Is your browser chrome? Cause mine is chrome as well and it would be odd if my forum appeared differently for both of us and that would mean the problem doesn't really lie on browsers?

No.  Firefox.

Hi

Screen resolution has something to do with this as well .

Regards,
Pizza Boi

Is the issue only occurring while you are logged in?  When I visit your forum and press the search link, the pop up appears under the navigation menu.

No, even when I log out it's still way up at the top of the page. This could be a problem for visitors/users cause if they slide the page down a bit, they might not be able to notice the popup when they click on "search".
@pizzaboy Is there a way i can fix it? So it shows at the bottom of the navigation bar disregarless of the screen resolution or browser? Thanks guys!

Hi

I'm afraid not. It really depends no the person's screen resolution .

Regards,
Pizza Boi

Should be able to overwrite the function that's incorrectly positioning the popup. Try the following :

Go to administration panel > modules > javascript codes management > create a new script

Placement : In all the pages
Paste the following and hit submit :

Code:

$(function() {
  for (var a = document.getElementsByTagName('A'), i = 0, j = a.length; i < j; i++) {
   
    if (/mainmenu/.test(a[i].className) && /\/search/.test(a[i].href)) {
     
      a[i].onclick = function(e) {
        var search = document.getElementById('search_menu'),
            offset = $(this).offset();
       
        if (/none/.test(search.style.display)) {
          search.style.display = 'block';
          search.style.left = offset.left + 'px';
          search.style.top = offset.top + 25 + 'px';
        } else search.style.display = 'none';
       
        e.preventDefault();
      };
     
      break;
    }
   
  }
});

So I have tried zooming in and zooming out the screen to see if that was the problem and I used the javascript codes that ange provided but still nothing worked. But thanks for the effort guys