Search modul ONLY in mobile Version and mobile menu position

Hi there,

can i see the issue on your site ?

Can I send you the URL right here?

Yes, please.

However, this is a public forum, everyone can see your site link.

There you go: https://www.fitnsexy.de

To set the position of the menu toggle to the left on mobile when search is deactivated, you can try this CSS:

@media (max-width: 767px) {
  .main-navigation .menu-toggle {
    display: inline-flex;
  }
}

Thx @alvindcaesar, that`s working. Can I also set it to the right?

And is there also the possibility to activate the search only in the mobile version?

Try change Alvind’s CSS to this:

@media (max-width: 767px) {
.main-navigation .menu-toggle {
    margin-left: auto;
    flex-grow: 0;
}
}

You can hide the search icon on desktop.

Hey @yingscarlett

The Code doesn’t work for me. I have the following settings in de customizer: https://gyazo.com/1b373b74f227375b2f7083702a4377fc. So the search is shown everywhere.

The best result for me would be to only have it shown in the mobile versions, but NOT in the desktop version. I think I have to activate the search in the cusotmizer, but tehn exclude it with css in the mobile versions, right?

I’ve tried this code the exclude the search modul in the mobile versions:

@media (min-width: 769px) {
    .menu-bar-items .search-item {
        display: none !important;
    }
}

Is the search currently active on your site now?

Yes. With this settings in the customizer: https://gyazo.com/1b373b74f227375b2f7083702a4377fc and the code in my oprevious post it`s allways visible.

Your site had cache before, we didn’t see the search icon until now.

Try this CSS:

@media(min-width:769px) {
.menu-bar-item a[data-gpmodal-trigger="gp-search"] {
    display: none;
}
.main-navigation .inside-navigation .main-nav {
    flex-grow: 1;
}
}

@media(max-width:768px) {
.menu-bar-items {
    order: -1;
}
.has-menu-bar-items button.menu-toggle {
    margin-left: auto;
}
}

Thx @yingscarlett

I have now integrated the code as follows, so that I have only deactivated the module in the desktop version and the menu and the search module are displayed in the mobile view as intended by Genertae Press.

/* GENERATE PRESS SEARCH MODUL ONLY ON DESKTOP */
@media(min-width:769px) {
.menu-bar-item a[data-gpmodal-trigger="gp-search"] {
display: none;
}
}

Thx for your support. SOLVED

You are welcome ? ??