Different headers for desktop and mobile

Hi Diddi,

Besides necessary updates (fixes/security) I will not add new features to my themes.

Do you mean the header image (for homepage) that you can set via the Customizer?

Guido

Hello Guido,
yes, that’s the picture I mean. And on a mobile device the standard image (1200 X 350px) looks very small. And the idea would be to set two different images for desktop and mobile.

On my site I have now deactivated the header image and display my image on a separate page. But this does not look as good as via the header …

But thanks for your answer anyway.

diddi

Hi,

When I take a look at the site mentioned in your other topic I notice you’ve added it there. Guess you don’t like the white space on left and right side.

With a CSS fix it’s possible to display a seperate header image in mobile screen. This can be done by hiding the header image in mobile screen and adding a background image for the image container instead. I can show an example later today, if you want.

Guido

Hello Guido,

that would be fantastic if you could show me this …

diddi

Hi,

You can see it here (temporary link).
If you increase screen size to 300% or visit the site in mobile, you will see another header image.
This is CSS only, no changes to theme itself.

The only difference between this and the original is that mobile menu is overlapping the header image, instead of pushing it down.

Guido

Hello Guido,

that’s exactly how I wanted it to look. Can you perhaps tell me what I need to enter where? Unfortunately, I’m a bit of a greenhorn…

diddi

Hi,

First I have a question. Currently you’re using a block for the header image? If you do, we can also use this block for the mobile header image only. So hide block in large screen, display it in mobile screen. And hide default header image in mobile screen. This way you can still use the default header image feature for large screen, and without a lot of tweaking for mobile screen.

Guido

Yes, I currently use a block. I have placed 2 blocks in the first two places on the home page, one for the large image and one for the small image. And these blocks are hidden differently.
But how can I deactivate the header for the mobile device?

diddi

Hi,

You can hide the default header image in mobile screen with this CSS:

@media screen and (max-width:767px) {
	.header-img {display:none;}
}

Add this at page Additional CSS of the Customizer.

Is this working for you?

Guido

Hello Guido,
great, now I like it very much.
I still have one thing to find out. The space between the header and the text on the homepage is bigger than on the post page, for example. This is probably due to the mobile image, which I have stored on the homepage and hidden for the desktop. But I just don’t know.
Thank you again. With the adjusted color and the header on all pages I find it very successful … ??

diddi

Hi,

Great!

About the white space on top at homepage.. This is added deeply inside the CSS of the blocks. Not very easy to remove properly.
Why not use the default blog template (set via Settings > Reading), instead of a custom page?

And I notice that only homepage has a sidebar, other posts and pages have white space instead. You can select the full width template for all posts/pages.

Guido

Hello Guido,
I can answer your question regarding the standard page as follows. I only recently took over the site and it was in a poor state in terms of format. My predecessor worked with the page builder, the block editor and the classic editor and the default did not play a role. I didn’t know WordPress myself beforehand and so there are still a few “errors” on the site.

How can I restore the default home page? Because it no longer exists…

And I also have another question: How can I use menu 2 on the desktop but deactivate it in the mobile version?

Lots of questions – I know. So thank you for your patience.
diddi

How can I restore the default home page??

The default homepage will display posts (that’s how WordPress works). But you already have a blog page, named “Beitrage”.
Currently your homepage is a static page, set in Settings > Reading. If you uncheck the boxes there, the homepage becomes a blog page.

How can I use menu 2 on the desktop but deactivate it in the mobile version?

Same as header image, with CSS you can hide it in mobile screen:

@media screen and (max-width:767px) {
	.mobile-nav-secondary-container {display:none;}
}

My predecessor worked with the page builder, the block editor and the classic editor and the default did not play a role.

If you want to make the site future proof you should use the block editor. Looks like most parts of the site are already build with that.
A page builder plugin can also be future proof (if updated frequently), but the default block editor becomes better and better.

Another question, did you choose my theme or was my theme already being used?
My themes are not updated anymore, still working fine, but you might want to switch theme in the future. My personal favourite is GeneratePress.

Guido

Hello Guido,
yes, I have decided to use the block editor and have also customized all the pages so far. And your theme was already there before I arrived – but I still like it.

I want the static page, but how do I get the sidebar to appear on the other pages as well? The current homepage has no sidebar, these are only two columns, which are created in the ratio 70 / 30. Or can I not control this at all?
diddi

P.S. Thanks for the code, I like it very much.
P.S.S And how can I adjust the color of menu 2?

• This reply was modified 4 months ago by diddi8.
• This reply was modified 4 months ago by diddi8.
• This reply was modified 4 months ago by diddi8.

Hi,

Via Appearance > Widgets you can add widgets to the sidebar. Your homepage uses the full width page template, and you’ve added columns for main content and “sidebar”. If you want the same sidebar content for all pages, best thing to do is redesign homepage (change page template from full width to default as well).

For which part of the menu do you want to change the colors?

Guido