Is it possible to have a different header for mobiles?

Hello @erisal

Yes, sure you can refer to the following article to help understand how the Header can be designed here.

And while on the Desktop view you can structure and design the Header accordingly.

I hope that helps. ??

Regards,
Suman

Hi, I know make this but this allows to display or not the logo block.
This not my question: I’d like only displayed image logo in the mobile header, without the title and subtitle. Is it possible ?

Hi @erisal,

Yes, using a piece of CSS code you will be able to hide the Site Title and Site Tagline only on mobile.

Kind regards,
Herman ??

Hi, I know that css code allows to do all that you want. When I use theme and premium version, this is not to code css : It’s not my job. I develop mobile first site and pwa, and your theme doesn’t manage responsive settings. May be in the future … I use oceanWP theme for the moment. Thanks for your reply. Best Regards.

Hi @erisal,

I am sorry, I missed something.

Now, using the Astra Header Builder, you will be able to hide the Site Title and Tagline on mobile by giving the Title and Tagline Font Size to 0 (zero).

I hope it clarifies.

Kind regards,
Herman ??

Hi, It works up to a minimum size of 1px. As soon as I put 0px, the default size is automatically selected. It was nifty but it doesn’t work.
The easiest way would be to add the option in a future version. It would then be possible to individually select the elements according to the device.

Hi @erisal,

This shouldn’t work that way!

I am going to bring this to our team. Thank you for bringing this to our attention.

Kind regards,
Herman ??

I also experience the problem OP shared regarding putting 0 px for size of tagline, but the system will revert to a default size and still display the tagline.

I’m trying to hide the tagline on tablets and mobile, and keep the tagline for desktops.

Since you mentioned that a CSS code snippet can solve this problem, I tried various codes but can’t get any to work properly. Will you point me to where I can find the proper CSS code snippet to hide tagline on tablet & mobile?

I’ve tried this snippet, which doesn’t work for me:

@media (max-width: 1000px) {
    p.site-description {
        display:none;
    }
}

Hi @vitruvian1man,

We are sorry for the inconvenience.

The following CSS should work

@media (max-width: 1024px) {
    .site-title, .site-description {
	    display: none;
    }
}

You might want to change the max-width in the code to any size you like. The code above will hide both the Site Title and Site Tagline on portrait iPad Pro and devices with a smaller screen.

I hope it helps.

Kind regards,
Herman ??

Thank you, @bsfherman. Your CSS code snippet worked. Much obliged for such a prompt response, too.

Perfect, @vitruvian1man!

Please mark the topic as Resolved and do let us know if there’s anything else we can help you with.

Have a nice day and stay safe!

Kind regards,
Herman ??

Hi,
The issue presented initially will be marked “fixed” after the release of an Astra update that fixes it. The fact that some users are sharing their workaround ideas here isn’t a fix to the theme issue.
Best Regards,

Ahhh….!! ??

I am sorry @erisal! My bad. I didn’t pay attention that vitruvian1man is not the Thread Starter. I definitely needed more coffee at the moment I wrote my response ??

I will see if I can ask our concerned dev team to fix this issue on priority.

Kind regards,
Herman ??