Header not fully hidden?

  • Maximus_33

    (@maximus_33)


    10 years, 6 months ago

    Hi fellow-website fans,

    I have an issue with my header, which I didn’t had before. I use the Twenty Fourteen Theme (create a childtheme as well). I use a custom header image and have previously succesfully hidden the header bar with the Website Title and search button. However, now something very strange happens:

    When I load my page “sterkensoepeltrainen.nl” the header is indeed gone, but when you scroll even a little down, the header is still gone, but now it takes up space (same height as it would be if it would be visible). Now if you scroll completely to the top (so the header image is FULLY visible on your screen), that extra header space disappears again. I am clueless on how to fix this. Can anyone help me out? To adjust a few things on the childtheme, I have used this code in the CSS editor:

    ‘/* Dit zorgt ervoor dat de Header image volledig over de pagina gaat */
    .site {
    max-width: none;
    }

    /* Dit zorgt voor volledige pagina breedte */
    .content-area {
    padding-top: 48px;
    }

    .hentry {
    margin: 0 auto 48px;
    max-width: 672px;
    }

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    margin: 0 auto;
    max-width: 90%;
    text-align: justify;
    }

    .page-content {
    margin-bottom: 48px;
    }

    /* Dit verwijderd de header tekst en de footer */
    /* Dit zorgt voor een andere banner als het scherm te klein wordt */
    @media only screen and (max-width:640px) {
    #site-header img {
    content: url(/Banner3.jpg);
    }
    }

    header {
    display: none;
    }

    #site-header img {
    content: url(/Banner1.jpg);
    max-width: none;
    width: 100%;
    }

    footer {
    display: none;
    }‘

Viewing 4 replies - 1 through 4 (of 4 total)
  • juggledad

    (@juggledad)

    10 years, 6 months ago

    Your image is eing scalled to the size of the browser window. On my screen it is huge. This is caused by the ‘width: 100%’ in this CSS

    #site-header img {
    content: url(/Banner1.jpg);
    max-width: none;
    width: 100%;
    }

    try playing with that. HIMNT: use the firebug extension in FireFox and you can dynamically change it to see it’s effects.

    Thread Starter Maximus_33

    (@maximus_33)

    10 years, 6 months ago

    Thank you for the quick reply juggledad,
    The problem is not the header image, that one is perfect. The problem is that there seems to be space reserved for another div below the header image, that appears on scrolldown and is hidden when scrolled to the top. You will see that, when you scroll down, there is more space created between the header image and both the menu buttons on the left, and the text of the page.
    How could I fix this? It also appears when I view it on my mobile phone.

    juggledad

    (@juggledad)

    10 years, 6 months ago

    I’m not seeing any header image now.

    Thread Starter Maximus_33

    (@maximus_33)

    10 years, 6 months ago

    Thanks again for your quick reply!
    That’s another problem I’m having atm. The header image doesn’t load consistently on mobile devices. It does load when you click to another page in the menu at the bottom of the page, but when refreshing it is gone again. Just thought I’d tackle one problem at a time 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Header not fully hidden?’ is closed to new replies.