Is it possible to have a different header for mobiles?
-
Hi, Is it possible to display only the logo in the header on the mobiles and the logo + the title + the menu nav on the PCs?
-
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 🙂
- The topic ‘Is it possible to have a different header for mobiles?’ is closed to new replies.