Moving Search Bar to wherever i need

Hi John,
Could you please post a link to your page?
Cheers!
– Maria Antonietta

Hi John,
If your theme includes a custom CSS editor, you can add the CSS rules there. In case this isn’t so, I recommend using this plugin to add your mods, so that your work doesn’t get overwritten on the next theme update: https://wordpress.org/plugins/simple-custom-css/

In case you’re already using a child theme, don’t worry about the plugin – you can safely go ahead and use style.css in your child theme.

Here are the CSS rules I’ve come up with:

.header {
    height: 400px;
}

#navigation {
    position: relative;
    top: -110px;
}

#search-top {
    right: -30px;
    top: -380px;
}

.col-full {
    margin: -20px auto 0;
}

#footer {
    margin-top: 0;
}

This puts the search box at the very top right of the page, shortens the header height and adjusts the other elements accordingly. I’m not sure if this is what you wanted to achieve. In any case, I took a screenshot after I applied the CSS above using Firebug for Firefox – you can preview the result here:

http://uploadpie.com/uybXJ

I hope this helps 🙂

That’s great news, you’re very welcome John 🙂

Hi John,
Could you please add the CSS I gave you to your site so I can have a good starting point to diagnose the problems. Most likely it’s a z-index problem, that is, it’s got to do with the stacking order according to which elements are displayed on the page.

Also, could you add this CSS rule so that you’ll have the menu at the very top appear correctly:

#top {
  margin-top: 20px;
}

Cheers 🙂

Hi John,

It looks like having shortened the header has caused this problem. However, it’s easily fixed by making the header overflow property visible, like so:

.header {
  overflow: visible;
}

This should fix the problem 🙂

You’re welcome!