[Support request] Mobile Header & Mobile Sticky Header Layout

[Tri Ryuzaki]

Hi, please instruct me to achieve this layout for mobile header & mobile sticky header:

(Left Menu Toggle)—Logo(center)—(Right Contact Button)

Some similar topics don’t work anymore and I can see many GP setting options have been changed since the last time which confuses me, please help. Thanks a lot
My site: https://boyle.law/

[Ying]

Hi there,

Both of the links don’t work for me, could you please check?

Thanks!

[Tri Ryuzaki]

It works on my side, please retry

[Redacted for security reasons]

[Elvin]

Hi there,

I’ve moved the link you’ve provided on the private information text field for security reasons.

I’ve tried logging in using it as well but it doesn’t work on my end too.

The link https://boyle.law/ doesn’t seem to be working as well. Can you confirm if the site’s server is perhaps having a site maintenance? It may be on a downtime. Let us know. 🙂

[Tri Ryuzaki]

That sounds weird to me, I already clear all cache and it works fine on both phone and laptop. How about just focus on the main question please, please suggest some custom css for it.I will check the site on another device.

[Tri Ryuzaki]

Here is the recent record: https://www.loom.com/share/8d1ccbb797bd4555a83dde4361c55b4a

[Tri Ryuzaki]

Hi, looks like the server is temporarily turn offline by client. In the meantime, could you suggest any solution css? Thank you.

[Elvin]

That sounds weird to me, I already clear all cache and it works fine on both phone and laptop. How about just focus on the main question please, please suggest some custom css for it.I will check the site on another device.

We ask for the URL to inspect the page to see how the page is structured. Some GP sites use a separate custom mobile header while some sites don’t.

We won’t be able to know if the suggestion is correct if we can’t inspect the site (or atleast see the template used). We’re basically guessing if we can’t check the site to inspect it for the correct selectors. 🙂

Here is the recent record: https://www.loom.com/share/8d1ccbb797bd4555a83dde4361c55b4a

This is good. This atleast gives us an idea that your site is using Ethos. 😀

Assuming the template is intact, you can try this CSS to center the logo.

.site-logo.mobile-header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

As for the right contact button, you can hook it in on generate_inside_mobile_header. let me know if you’ve hooked it to fix the layout using custom CSS. 😀

[Tri Ryuzaki]

Hi, the logo is centered now but the menu toggle is put to the right while contact button is on the left. How to exchange those 2 elements please (Menu toggle should be on the left and contact button is on the right):

Current: Contact Button——-Logo——–Menu Toggle
Need to be: Menu Toggle———Logo———-Contact Button

And also I think you guys should definitely rebuild a dedicated header / footer builder just like Astra, Kadence themes which allow us to easily customize, adding elements for 3 positions (left, center, right). As a premium theme, the current header setting option of GeneratePress is really not practical and not user friendly at all which users need to go back and forth to ask for custom code for such a simple customization like that. It should be something more visual with drag & drop, please check this Astra header builder example: https://www.youtube.com/watch?v=blvToYnfa18. It will help save a lot of time & effort for both side users and support team as well as reduce the support request dramatically.

[Elvin]

Hi, the logo is centered now but the menu toggle is put to the right while contact button is on the left. How to exchange those 2 elements please (Menu toggle should be on the left and contact button is on the right):

You can add this CSS to swap their places.

.main-navigation .inside-navigation {
    flex-direction: row-reverse;
}

And also I think you guys should definitely rebuild a dedicated header / footer builder just like Astra, Kadence themes which allow us to easily customize, adding elements for 3 positions (left, center, right).

You can actually create your own layout for the Site header through a Block Element.

You can create a Block element and set the element type to “Site Header” as shown here – https://share.getcloudapp.com/Jrux0Ny8

You then create your own layout for a site header on the Block editor UI but you may have to install a plugin to add blocks for Navigation menu. (or try shortcodes like the ones I’m suggested here – https://generatepress.com/forums/topic/navigation-menu-in-block/#post-1643680)

[Author]

Posts