[Resolved] A few issues with the page header

Home Forums Support A few issues with the page header

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #333599
    Neil

    Hi,

    I’ve noticed a few issues with the page header as follows;

    1. The vertical centre setting does not seem do that. It’s positioned the top of the content in the centre which means that the header content seems to be closer to the bottom.

    2. When viewed on mobile and with a fullscreen background image, the header content can go off the bottom of the screen not to be seen (even when scrolling down).

    3. On mobile in the same situation as above, the mobile menu interferes with the header content.

    Any suggestions would be greatly appreciated.

    Thanks,

    Neil.

    GeneratePress 1.3.48
    GP Premium 1.3
    #333605
    Leo
    Staff
    Customer Support

    Hi Neil,

    Any chance you can provide a link to your site? Thanks!

    #333679
    Neil

    Hi Leo,

    Sure, it’s on the live version of the site right now too…. http://www.fickaskap.com

    Thanks,

    Neil.

    #333733
    Leo
    Staff
    Customer Support

    1. Not quite sure what you mean. It looks center to me? https://s23.postimg.org/pl62evft7/pageheadercenter.png

    2. Hmm I think I can see all the content? http://www.screencast.com/t/qcW0M6dU
    Keep in mind that background images are not responsive by nature. One option is to switch out the background image specifically for mobile.

    3. By interfering do you mean pushing the content down like the video above?

    Sorry if I’m misunderstanding something. Let me know 🙂

    #333856
    Neil

    Hi Leo,

    It will appear more centred on wider screen resolutions. Try it on a tablet for example and it definitely is not centred

    My 2nd Monitor is much ‘squarer’ and it looks like this https://snag.gy/hRm1Vo.jpg

    I have taken a screenshot from my phone what happens when I click on the menu.
    https://goo.gl/photos/BkMp3SsYZ74YbNDq8

    #334066
    Tom
    Lead Developer
    Lead Developer

    It actually is centered, it’s just taking the header into account. You can check the Place content behind header option if you want the content to ignore the header: https://docs.generatepress.com/article/merging-the-page-header-site-header/

    As for the second issue, can you try this CSS?:

    @media (max-width: 768px) {
        .main-navigation.toggled .main-nav>ul {
            position: absolute;
            width: 100%;
            z-index: 9999;
            background: #222;
        }
    }
    #334072
    Neil

    Hi Tom,

    That’s a massive improvement for both items, thanks.

    I haven’t tested on my actual mobile phone yet but in the mobile view of the customise page the actual menu icon is behind the header text too. I’ve not seen this on my phone so I suspect it’s not an issue in reality. I’ll have a look and let you know.

    Thanks for your help.

    Neil.

    #334208
    Tom
    Lead Developer
    Lead Developer

    That’s one of the drawbacks of placing your content “behind” the header I’m afraid, which is why it’s something you have to turn on.

    You could try adjusting the top/bottom spacing.

    #334340
    Neil

    I’ve played around with a few settings and what I really need to be able to do is reduce the font size for the page header on mobile only. Is there any CSS that would allow me to do just that?

    #334365
    Neil

    Hi Again, I’ve found the settings for adjusting the font size for headings based on full-screen or mobile. This has helped a lot.

    However, I could really do with some way of either applying the “vertically center content” and “Place content behind header” only when not on mobile or having different top padding for full screen vs mobile.

    Thanks,

    Neil.

    #334367
    Neil

    Hi Tom,

    I’ve worked something out 🙂

    @media (min-width: 768px) {
    	.generate-inside-combined-content {
    		padding-top: 100px;
    	}
    }

    Seems to do the trick.

    #334556
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.