Header behaves differently at the top of a page vs the top of a post

[untypical]

Hello. I am redeveloping my web site at the moment and using the same header for some posts and some pages. When the header is used on a page, it looks like this:

When exactly the same header is used at the top of a post, it looks like this:

You can see that the title images is bigger and menu smaller when on the top of a page (first image) than it is on the top of a post (second image). The two photos are roughly of the same scale so the difference is noticeable. All posts are behaving the same as each other. All pages are behaving the same way as each other.

Any ideas?

[tristup]

Hi @untypical,

Thanks for reaching out.
Sometimes, the only screenshot doesn’t help us recognize the issue you are having. We need to examine your site to determine the cause of the issue. Can you please share the URL of the site along with the login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– Add any one post and page to compare the header

To create a secure note, click the key icon underneath any of your posts.

NOTE: I have checked the site listed on your Themeco Account, and didn’t find such a problem on any of the untypical sites.

Thanks

[untypical]

Hello @tristup, thanks for coming back to me.

Site URL: www.untypical.com.au
Login URL: www.untypical.com.a/wp-admin

The page URL is the home page - www.untypical.com.au
The post URL to compare - www.untypical.com.au/privacy

I will share admin details in a secure post.

I am looking at the page in Safari at full size.

[ruenel]

Hello @untypical,

Thanks for the info. I have logged in to your site and investigated your issue. I found out that you have 9 custom Headers. The “main Header” is the current header assigned for the entire site with the priority number of 0. This header is showing in the Privacy page, www.untypical.com.au/privacy:

Meanwhile, your homepage is currently displaying an old custom header. You may have deleted this header already. Even if it was deleted, it still displays on the homepage because you have explicitly assigned that custom header to your homepage. Check out the screenshot below:

To get your issue resolved, edit your homepage and make sure to assign the default header instead.

Hope this makes sense.

[untypical]

Hello @ruenel, thanks for your reply.

I have deleted the excess headers and pages - there are now only four pages in the site (the rest are in Trash in case I need them) and only five headers. Everything is working as it should except:

• the four pages are still displaying the smaller menu, even though I believe I have specifically nominated main Header as their header.
• all posts are showing the correct headers, including the ones designated to use main Header (category = untypical or category = other)
• When I am visiting a post (e.g. www.untypical.com.au/podversations) on my full screen, when I select another post from the menu (e.g. CLIRA from the Regional menu), the Navigation Modal that I have set up for the smaller screens flashes up briefly. Note that, based on the colour scheme, it appears to be the Navigation Modal for the destination screen rather than the original screen.

I hope that all makes sense.

[ruenel]

Hello @untypical,

Which 4 pages are still displaying the old custom header? When I inspected your homepage, you still need to edit the page and explicitly remove the header assignment. You NEED to set it to “default” instead of having the old 2959 custom header.

Thanks.

[untypical]

These are the four pages - they are still displaying the wrong header.

Should the Header be set to Default or to actual Header - main Header?

Sorry if I am being difficult

[ruenel]

Hello @untypical,

You should set the Layout Assignments to default. It will then be using the custom header assigned to the Entire site. I have checked all of those 4 pages. It is now displaying the “mainHeader” custom header. I also see the condition in your custom header.

If these changes were not reflected in your browser, try private browsing mode or use another browser like MS Edge or the Brave browser. Your Safari browser may be serving the cache version of the pages.

Best Regards.

[untypical]

Hello again,

I now have tried other browsers (Chrome and Brave) and it seems to be doing the same thing.

Let’s close this off for now and I will review in a couple of weeks. Thanks for your help.

Neil

[ruenel]

Hey @untypical,

I think I found something wrong in your font settings. You seem to set it to 1em. Be advised that you cannot use em as your base font. You should use a root font size of px, rem or clamp like the following:

/* SET STABLE FOUNDATION */
:root {
  font-size: 16px; /* Or 100% */
}

OR

/* EVEN BETTER - responsive scaling */
:root {
  font-size: clamp(14px, 2.5vw, 18px);
}

Or you can simply go to Theme Options > Typography to set your fixed font size:

Perhaps this video can help you understand and have a fluid typography:
https://www.youtube.com/watch?v=lgxroZ02t8I

Best Regards.

[untypical]

Hello, thank you for continuing to check. I have changed the settings in the Theme Options > Typography - they now look exactly the same as your screen shot.

From what I can see, the header behaviour hasn’t changed.

[tristup]

Hi @untypical,

The suggested code is not related to your Header; it is regarding the setting of Font.

Thanks