Topic: Move search icon a bit on the right

FunkyCss
March 30, 2024 at 4:52 am

Hallo I would like to move the search icon that is centered now, my navigation is bellow header with center menu items.

I have used this code from a previous topic to make the off canvas left, now I would like to make the same but on the right side the search icon.

Thank you in advance

Andreas
Leo
March 30, 2024 at 4:29 pm
Hi there,

It would be very similar to your CSS for the off canvas toggle:
```
.main-navigation .menu-bar-item {
    position: absolute;
    right: 0;
}
```
You will need to add a media query for smaller screens: https://docs.generatepress.com/article/responsive-display/

Hope this helps 🙂
FunkyCss
March 30, 2024 at 11:24 pm

Hallo,

Thanks for the css but this one makes menu items not to work.

The actual behaviour is that when you click a menu link it will open always the off canvas menu.

Alvind

March 31, 2024 at 7:14 am

Hello there,

Try this CSS:

.main-navigation .menu-bar-item > a[data-gpmodal-trigger="gp-search"] {
  position: absolute;
  margin-left: 200px;
  margin-top: -30px
}

FunkyCss
March 31, 2024 at 9:10 am

Hallo this is working a bit better but not for all Laptop Devices

I need something to touch the end of the header width like the off canvas, with this the icon will be hidden on some specific media queries.
FunkyCss
March 31, 2024 at 9:12 am

Another solution would be to let it like this with 200px but now I have to fix this

span.menu-bar-item.slideout-toggle.hide-on-mobile.has-svg-icon {
position: absolute;
left: 0;
}

as this looks different

David

April 1, 2024 at 7:01 am

Hi there,

remove this CSS:


@media(min-width: 1025px) { 
span.menu-bar-item.slideout-toggle.hide-on-mobile.has-svg-icon {
    position: absolute;
    left: 0;
}

div#primary-menu {
    margin-left: 50px;
}

.main-navigation .menu-bar-item > a[data-gpmodal-trigger="gp-search"] {
  position: absolute;
  margin-left: 200px;
  margin-top: -30px;
}

}

And add this:


nav .menu-toggle {
    display: block;
}
.mobile-menu,
.menu-bar-item.slideout-toggle {
    display: none;
}

.main-nav {
    margin-inline: auto;
}

FunkyCss
April 1, 2024 at 8:20 am

Hallo there, David thank you very much this works without any issues !

Have a nice day

Andreas
David
April 2, 2024 at 12:25 am

Glad to hear that

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Move search icon a bit on the right