Hi!
The problem is, that the settings and the results box is actually not printed inside the header, but into the body itself, so is can float over the content at any times. Otherwise overflowing elements would make it impossible. This means, that targeting .header-sticky-real.act-scroll #ajaxsearchprores1_2.vertical, div.asp_r.asp_r_1.vertical won’t do anything, as that node does not exist.
The only way to resolve this, is to have a script that watches the window scroll, and adds a CSS class to all main search elements whenever the menu becomes sticky. I noticed that it happens at 45 pixels from window scroll. Here, I constructed a script, that will watch this scroll, and add ‘asp_sticky’ to the main, result and settings elements, so you can target them easily.
Add this custom code to the functions.php in your theme/child theme directory (copy from line 3 only!). Before editing, please make sure to have a full site back-up just in case!
Now, target each element with these rules:
.asp_m_1.asp_sticky {
// Main search box
}
.asp_r_1.asp_sticky {
// Results box
}
.asp_s_1.asp_sticky {
// Settings box
}You will most likely have to use rules with the !important modifier, as there are higher specificity CSS on the page, like so:
.asp_m_1.asp_sticky {
margin: 10px 5px !important;
}This should hopefully do the trick, and get you closer to what you need.
Best,Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
