[cindy]

On deskstop the top menu has a little magnifying glass for search. That’s fine, although a text link that says “Search” would be better.

But this is a problem on mobile, where the burger menu doesn’t have any search option.

I need a fix for this. People need to have an easy way to search on mobile.

The site is ExplorationVacation.net

Thanks.

Cindy

 

[minal]

Hello @cindy:

Here are the CSS snippets for the search to appear on mobile devices. And add to your Additonal CSS .

Go To Dashboard > Appearance > Customizer > Additional CSS.

@media screen and (max-width: 990px) {
 .site-navigation.nav-primary {
    background-color: transparent;
    display: block;
    position: absolute !important;
    right: 0;
    top: 0;
    width: 260px;
 }

 .mobile-menu-two .site-navigation.nav-primary{
    right:50px;
 }

 .site-navigation.nav-primary #search-toggle {
    color: #000;
 }

 .site-navigation.nav-primary #search-container {
    left: -10px;
    bottom: -66px;
 }

 .admin-bar .site-navigation.nav-primary #search-toggle {
    margin-top: 45px;
 }
 .site-navigation.nav-primary .search-field {
    height: 40px;
 }

 .site-navigation.nav-primary .search-form {
    padding-inline: 20px;
 }

 .site-navigation.nav-primary .catchresponsive-nav-menu {
    display: none;
 }
}

This CSS displays the search on top of the header.

Please feel free if you need any further assistance.

Sincerely,
Minal

[cindy]

Does this just go in the additional CSS in the customizer? (It looks so different from everything else there)

Cindy

[sujapati]

@cindy: Yes, please add this to the Additional CSS field and save the changes.

Regards,
Sujapati

[cindy]

I get these messages:

“Unable to save due to 1 invalid setting” and “Markup is not allowed in CSS”

Cindy

 

 

[sujapati]

@cindy: Sorry to hear you’re having trouble saving the new CSS code. We’ve tested it on our server, and everything is working correctly—the changes are saved and reflected in the browser as expected.
Please go to ‘Appearacne => Customize => Addtional CSS’.
You will get the field to paste the code. Below is the screenshot.

You can also try alternative method and paste the code into style.css.
Please navigate ‘Appearance => Theme File Editor => Stylesheet(style.css)’.

If neither method works, the issue might be caused by a plugin conflict. In that case, please try deactivating plugins one by one and check if the CSS can be saved.
(Please share with us where you added the CSS and also can you share a screenshot of the error you’re seeing?)

Regards,
Sujapati

[cindy]

Well, it takes the code when I do it from the Theme file editor, but it doesn’t seem to actually add search to the menu. And nothing else in my  Isn’t there a cleaner way to do this? Like adding it to the menu? Isn’t there an option to change how the site looks on mobile vs desktop that would address this?

 

[sujapati]

@cindy: Yes, the theme is already designed with a separate structure for mobile and desktop devices. You don’t need to add any extra code to make changes—there is a built-in option for the mobile search functionality on mobile devices .

To configure this, please navigate to:
‘Customizer => Theme Options => Header Right Sidebar Options’
From there, you can enable or disable the search options for mobile devices as needed.

Please feel free to reach out if you need any further assistance.

Regards,
Sujapati

 

 

 

[cindy]

Won’t that disable the entire sidebar?

I just want a usable search function to show up at an easy to get to spot on mobile. That should be a give.

And that original code disabled the search function completely on both mobile and desktop.

[cindy]

The only thing I get under the header right sidebar option is to disable the entire sidebar.

[cindy]

I didn’t mess with the sidebar,

But now realize that having tried this code earlier and removed it after it didn’t work, I have NO SEARCH function on either my website or mobile!!!!

This is a disaster.

Can I please get some support to fix this!!!

[cindy]

Help! Help! You’re early directions broke my site’s search function!!!

[cindy]

I need this resolved now!!

[sujapati]

@cindy: Apologies for the inconvenience. Our team is working on this issue as a priority and will update you shortly.

[Author]

Posts