[Resolved] How to make Toggle button alignment from left to right

[Karzan]

Dear GPP support,

I would like to ask you to help me with custom css, for how to make toggle button alignment on mobile menu form left to right?
briefly how to Control alignment of Toggle button. using off canvas panel.

I’m using GP Premium 1.8

Thanks for your help.

[Leo]

Hi there,

Would you like to keep the search on the right as well or move that to the left?

Let me know 🙂

[Karzan]

Hi Leo,

Thanks for your care,
:),
I want to move the search to the left,
And one more thing please, I want when I clicked on the search button the (logo and the Toggle menu) totally would be hidden,I mean exactly like this website:
Containing custom text something like that ” search in this GPP site” as well as the moving or motion of the opening search box,
By adding JS or Hook, or anything else?
https://www.steegle.com/

Thanks for your incredible Support.!

[Leo]

Try this CSS to swap the position:

#mobile-header .mobile-bar-items {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-right: auto;
    margin-left: 0;
}
@media (max-width: 768px) {
    .slideout-navigation.do-overlay .slideout-exit {
        text-align: right;
    }
}

Unfortunately the search on the example site requires quite some custom coding which is out of the scope of this forum.

Let me know if the above works 🙂

[Karzan]

Thanks Leo for your reply,
it works! for now the hamburger on the right,
but close button for “off canvas pane” mobile still on the left,
how can I move it to the right as well, please,
look at the below:
https://drive.google.com/open?id=1i62Juj_z0x-8WfbZ6KGjxL9PlAj5UQ8Z
and
Leo, could you help me to hiding these little drop-down arrow:
see below please:
https://drive.google.com/open?id=1S32Q1-_Qrgp9efd-6jTZE7m3ASAcPeW4

another request for help, as I request before about search button
could be possible to the search box like this GP website:

https://wplift.com/

I appreciate your help

[Leo]

Updated the CSS above:
https://generatepress.com/forums/topic/how-to-make-toggle-button-alignment-from-left-to-right/#post-872819

This should do for removing the dropdown arrows:
https://generatepress.com/forums/topic/arrow-on-menu-drop-downs/#post-172450

As for the custom search, as I mentioned above, this would require lots of custom coding which is out of scope of this support forum. We are considering adding a full-screen search feature in the future though.

[Karzan]

Thanks Leo,
Hamburger button now totally on right.great thanks again,

About the disabling little arrow drop-down
a little bit issue occurred with dropdown menu padding,
now its not in the center of main menu(parent) items I mean sub-menu box:
see please:
https://drive.google.com/open?id=1Tm-wiw_v6c_EWLay6ED6HXt1IcGLxO4l

but before adding custom CSS for disabling little arrow the padding doesn’t have issue, the submenu box center for the main menu parent.
see please:
https://drive.google.com/open?id=12kWeQuPykBqbgeP6IeELyal2U96dKbQW

by the way if it is possible any suggestion-tutorials or plugins to add the full screen search like that how they add it:
https://wplift.com/

Thank you so much Leo,

[Leo]

For the CSS to remove dropdown arrow, can you try editing the padding to 50px to match the global setting?

I don’t know any plugins or tutorials that do that kind of custom search unfortunately – it will require quite some custom coding which I’m not sure if you are comfortable with.

[Karzan]

Hi Leo,

You helped me a lot Leo, much appreciated,

Padding worked great.!
for me with 65px, thank you so much.

I’m so sorry for bothering you, but my customers ask me for the full search overly, if it could be with custom codes no problem I will try with it as much as I can, if you help me.
after all if it is not possible for now, Could you advice me how to transfer the search icon from main menu(header menu) to Secondary menu(top nav menu)? please,

Thanks a Million Leo,
Thanks GP support!

[Leo]

Sorry but as I mentioned, providing a custom solution like that is out of the scope of this forum.

You could try looking for a developer on a site like this:
https://codeable.io/

To move the search to secondary navigation, this should help:
https://docs.generatepress.com/article/navigation-search/#use-navigation-search-in-secondary-navigation

Let me know 🙂

[Karzan]

Hi Leo,

First of All sorry for I was late in answering you.
Thanks for your advice!and you friendly support.
Yes, it works.Thanks a lot.

One more thing, please if it is possible? about off canvas menu,
Could we make the logo visible while we are in (off canvas menu) mode on mobile menu.

Best Regards, much appreciated your help.
Karzan

[Leo]

Try the off-canvas widget area.

[Karzan]

Hi Leo,

Thank you so much for your support, you helped me a lot, it worked, off-canvas widget,

Best Regards,
Karzan

[Leo]

Glad I could help 🙂

[Charles]

Hi,

I’m trying to move the close toggle button from the left to the right on mobile off-canvas menu. However, the above CSS isn’t working for me.

Any help would be great.

Thanks

[Author]

Posts