Ad banner at the top of the page pushes the image down, but not the title bar

  • Author
    Posts
  • #119345

    irfanquader
    Member

    Hi.

    I have activated the Perennial theme and WordAds. I see that the ad banner at the top of the page pushes the header (hero) image down, but the site title and menu buttons remain in the same position. So instead of the header image being in the background of the site title, it is the ad banner that is in the background.

    Is there some way the site title can be moved down with the header image?

    The blog I need help with is thegoodlifewithiq.com.

    #119502

    designorbital
    Theme Author

    Hi,

    If the Ad block has the same height always, than the following workaround can work,

    Please try the following CSS Snippet.

    .has-site-hero .site-header {
        top: 130px;
    }

    Thanks

    #119513

    irfanquader
    Member

    Hi, thanks for the reply. The ad banner changes height depending on whether it is viewed on a PC or mobile phone. Will the code still work?

    Also, I have absolutely no experience with CSS. Could you tell me how to go about inserting this code? A step-by-step process would be very helpful.

    Thanks!

    #119514

    irfanquader
    Member

    (Update)

    So I copied the code into the CSS code field in the customize menu, and that seems to have worked. I increased the number of px to optimize for viewing on mobile phones.

    New problem: the code pushes the sticky menu down into the center of the page. I have disabled it for the time being for this reason, but I would like to keep it enabled.

    #119562

    irfanquader
    Member

    Hi. Looking forward to receiving a solution.

    #119565

    designorbital
    Theme Author

    Hi,

    It will be difficult to manage the different scenarios via hacks. Let try the following CSS snippet.

    This snippet will assume the fixed height of Ad wrapper at two viewports. And at menu opening, header height will reset to default. Because, it will not be possible to manage other elements on menu opening.

    Let try this,

    /* Site Header Hack */
    body:not(.has-menu-open).has-site-hero .site-header {
        top: 288px;
    }
    
    @media (min-width: 768px) {
    	body:not(.has-menu-open).has-site-hero .site-header {
    	    top: 128px;
    	}
    }

    Thanks

    #119566

    irfanquader
    Member

    Hi. Thanks for the code.

    It’s working OK on the desktop screen.
    – the site title is sitting on the header image;
    – the sticky menu is hidden on scroll down;
    – on scroll up, the sticky menu appears a little too far down the screen, but I can live with that

    BUT… on the mobile screen, the scenario is pretty much the same as earlier. The title sits well on the header image, but the sticky menu appears on the top 1/3 of the screen on scroll down, and on the bottom 1/3 of the screen on scroll up.

    Most of my visitors will see my blog on their mobiles, so please see if you can think of another solution.

    #119580

    irfanquader
    Member

    Hi. Any luck?

    #119583

    designorbital
    Theme Author

    Hi,

    Let try the following CSS Snippet. It will handle the Sticky Menu as well,

    /* Site Header Hack */
    body:not(.has-menu-open).has-site-hero .site-header:not(.headroom--fixed) {
        top: 288px;
    }
    
    @media (min-width: 768px) {
        body:not(.has-menu-open).has-site-hero .site-header:not(.headroom--fixed) {
            top: 128px;
        }
    }

    Thanks

    #119584

    irfanquader
    Member

    Hey, thanks! This is working. The sticky menu and site header are both appearing in the perfect position, both when viewed on the desktop and the mobile.

    The only small issue I see is that the animation of the sticky menu is a little jerky on the mobile, but that might just be because of the processor speed. I can live with that.

    Thanks again!

    #119588

    designorbital
    Theme Author

    Thanks for your feedback.

The topic ‘Ad banner at the top of the page pushes the image down, but not the title bar’ is closed to new replies.