Ah, I have not checked them.
That is because there is a rule like this.
@media (max-width: 991px) {
.nav-bar .module-group .module {
display: block;
float: none;
width: 100%;
}
}
You need to override this rule for search box only, like so:
@media (max-width: 991px) {
.nav-bar .module-group .module.search-widget-handle {
display: none;
}
}
Sorted!!! Thank you :0)
Although something very weird has just happened and I don’t know if it’s connected…..!
I published the changes….all good so now you don’t get the magnifying glass on mobile….but now when I go to my live site ‘view site’ the footer looks different (pre changes). I amended the footer in customizer this morning (when you go to customize>appearance – it looks as it is supposed to do with the published CSS changes).
Any idea why the live site is still showing pre footer changes since adding the CSS!? Utterly weird!
Thank you again
Well, no. I dont think they are connected.
You maybe forgot to press Publish button? I dont know.
I definitely pressed published.
If you look in Appearance > customiser it looks perfect. I have just looked on my mobile and looks fine.
But if you go to Dashboard > view site, the footer is the old footer and not the new one (as showing and published in Customiser).
Any ideas why this is happening? A glitch?
Thank you, Victoria
Umm, I have never encountered that situation, there is nothing to say but to provide a reference page url:
https://mhthemes.com/support/knb/theme-customizer-not-working/
If that persists, please make another thread for help.
Cheers!
Hello – I have worked out that if I take the additional CSS you kindly provided:
@media (max-width: 991px) {
.nav-bar .module-group .module.search-widget-handle {
display: none;
}
My footer goes back to how it should on desktop live site.
However, I obviously want to keep that CSS as it has solved my issue around the magnifying glass on mobiles and tablets.
Any idea why it changes the footer on desktop live site? It’s definitely that causing it as when I take it out, the footer looks how it should (and how I published it).
Thanks for all your help,
Victoria
Hi.
The css you pasted lacks the closing brace for @media.
That might affect latter styles for footer?
Sorted!!!!! Thank you :0)
Congrat!
Please mark it as resolved.
BTW, nice pics!
I am sorry I spoke too soon!!! The footer is showing as it shows in live site and customize, but just noticed the pesky magnifying glass is back on my top nav!!!
I have this CSS:
@media (max-width: 991px) {
.nav-bar .module-group
}
.module.search-widget-handle {
display: none;
}
I added in the bracket as you said, and it sorted the footer. But the magnifying glass is back on mobile and tablet!
Thank you, Victoria
Your css lacks something.
Please compare, very carefully, your css with my css.
Hello – right, I have put your CSS back in exactly as you sent it to me. And now the footer has gone funny again in the live site as you already know about. But good news – the magnifying glass has gone as required.
I had obviously put the ‘closing brace’ you told me to put in, in the wrong place.
Would you mind showing me exactly where it should go in what you’ve provided:
@media (max-width: 991px) {
.nav-bar .module-group .module.search-widget-handle {
display: none;
}
}
I am so sorry I am being a bit of pleb. I am completely new to CSS and learning in baby steps so I had obviously put it in, in the wrong place. It got me my footer back but put the magnifying glass back in!
Thank you for being so patient with me!
Victoria
It is ok, lets just fix the problem.
Actually, I dont know what is the desired styles of the footer.
Now I see is white background and every thing aligned center: menus, sns icons, copyright.
Previously, it was black background and menus are aligned left and stacked vertically.
