Use Elementor Created Header only on mobile

Hi there,

I'm not very familiar with Elementor.

Have you checked with their support?

If it's possible then they should be able to point you in the right direction.

The query is not related to elementor. I am talking about GP Premium. I want to use GP Premium header only in desktop. For mobile it should not be desplayed. I will use elementor header only in mobiles.

Please let me know.

Disable the mobile header option:
https://docs.generatepress.com/article/mobile-header/

Then you can hide GP's default header on mobile with this CSS:

@media (max-width: 768px) {
    .site-header {
        display: none;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Hi, thank you. I have done that as per your instructions. Now the Mobile header is Ok. Its coming from elementor. But desktop header is also coming from elementor.
I mean I have done the Responsive settings to not to show that header on desktops.

Now the desktop header is complete gone. http://prntscr.com/oh4tfc

Will you please help me to Hook In the desktop Header? the header which is from generatepress.

Thanks and regards

Have you figured this out?

I still see the default GP header on desktop:
https://www.screencast.com/t/KSju76Hw

I spoke to elementor support and they have sent me the following reply.

Thank you for contacting us.

I'm afraid, this is not possible. When your header is built using Theme builder, it overrides the theme's header according to https://developers.elementor.com/theme-locations-api/ when it's set to "Entire Page". And using the Visibility function won't really help in achieving this. Unless you decide to set the Display Condition of the site not to display on the entire site then you can have the Elementor Header on some pages and the theme header will still show on pages you have excluded from the header template.

Do you have any solution on this?

After their reply I disabled elementor header and i am continuing with GP header.

So are you hoping to disable the theme's header on some pages?

If so you can create a Hook Element like this:
https://www.screencast.com/t/vL72mKYv98ov
https://docs.generatepress.com/article/hooks-element-overview/

My requirement is like this. Either existing mobile header to look like this:http://prntscr.com/ohlpdc

else whatever header i have created for mobile using elementor that to be displayed only in mobile and for desktop GP header.

Existing one is looking like this: http://prntscr.com/ohlpxh

If we take the logo on second row then also our problem solved.

Please let me know if this is possible.

Regards

It should be possible to move the logo to the next row but it might take a few tweaks.

Can you disable the mobile header option first?

Also disable Autopimize and any caching plugins you might have.

Let me know :)

Hi,

Mobile header disabled.
Autooptimize plugin deactivated,

Thank you

Can you remove this CSS as well since you want to try GP's header on mobile now?
https://generatepress.com/forums/topic/use-elementor-created-header-only-on-mobile/#post-961236

Let me know :)

Hi,

Please address 2 issues for me. I have completely removed elementor as it was the reason behind making the website load slow.
Now I am redesigning the site using GP and Gutenberg. The new URL is http://blissfulweddingfeet.com.au

1. I want the mobile logo on second row as it is there in http://prntscr.com/ohlpdc
2. Remove unwanted padding from my child theme on home page: http://prntscr.com/oka8r7
3. Transparent background on social Icons. http://prntscr.com/oka978

Looking forward!

Can you create a new topic for your question since we are going with a different method now?

Thanks :)