[Resolved] Merge Top Bar and Main Menu with header slider

Home Forums Support [Resolved] Merge Top Bar and Main Menu with header slider

Home Forums Support Merge Top Bar and Main Menu with header slider

  • This topic has 15 replies, 2 voices, and was last updated 7 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #346353
    Katharina

    Hi there,

    i have i few questions:
    i added a slider instead of the header image with this code i found here in the forum:

    GP Hooks before header:

    <?php if ( is_page( 16 ) ) : ?>
    [metaslider id=25]
    <?php endif; ?>

    Custom CSS:
    .page-id-16 .site-logo {
    display: none;
    }

    That works great.
    Now i want to

    1: Merge the top bar and the main menu with the slider and set a transparent background, so that both of them are situated on the top / right side of the slider

    2: overlap the main container the slider a little bit (can i send you my screendesign somehow?).

    thank you!

    Katharina

    #346457
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. The Page Header add-on is probably your best bet here. You would add your slider in your page header content: https://docs.generatepress.com/article/merging-the-page-header-site-header/

    2. If you upload it to your Media Library, you can share the File URL in here.

    #346547
    Katharina

    Hi,

    that was my first try, but i’d like to have the slider fullwidth and the container narrower. With the Page Header add on the slider had the same width as the container.

    http://www.energieeffizienz.tirol/wp-content/uploads/2017/07/Screendesign2.jpg

    #346742
    Tom
    Lead Developer
    Lead Developer

    You should be able to re-create that exact look using the Page Header and then some CSS for the main content area.

    If you can link me to your page using the page header add-on, I should be able to help ๐Ÿ™‚

    #346959
    Katharina

    Great, thank you.

    The Menu and Top bar work good on the slider (didn’t know, that the top bar can also merge with the page header add on, that’s perfect!) so only thing missing is the overlap of the main content area. am i still able to use sections then?

    here the link:

    http://www.energieeffizienz.tirol?bypass=optimal

    if you need access to my dashboard i would send the per email.

    #347147
    Tom
    Lead Developer
    Lead Developer

    You could do something like this:

    #page {
        margin-top: -100px;
        z-index: 9999;
        position: relative;
    }

    However it would require your page header to be wider than the content (full width etc..) in order to see the effect.

    #347177
    Katharina

    unfortunatley it doesn’t work out.

    I played around with the settings (full width, contained,) but the only effect i reach is the opposite of what i wanted :). The content ist full width but i never achieve to have the slider full width.

    So if i change the page header from contained to fullwidth nothing happens.
    If i change the page builder content from contained to full width i see the difference but only the content, the slider stays contained.

    #347393
    Tom
    Lead Developer
    Lead Developer

    Can you set your page header to be full width so I can see why the slider is staying contained?

    #347743
    Katharina

    i’ve already set the page header to full width. Because everything is translated into german on my dashboard, i made a screenshot to make sure we’re talking about the same thing:

    http://www.energieeffizienz.tirol/wp-content/uploads/2017/07/Screenshot-1.png

    #347850
    Tom
    Lead Developer
    Lead Developer

    Try adding this CSS:

    .generate-combined-content.grid-container {
        max-width: 100%;
    }
    #347969
    Katharina

    that’s it. Thank you very much!!!

    Katharina

    #347987
    Tom
    Lead Developer
    Lead Developer

    You’re welcome ๐Ÿ™‚

    #348120
    Katharina

    Hi, i’m sorry, but i recognized now, that this doesn’t work on mobile devices. On small screens, the main content overlaps nearly the whole slider-image.

    So i tryd to add:


    @media
    (min-width: 64em)
    #page {
    margin-top: -100px;
    z-index: 9999;
    position: relative;
    }

    with the effect that the whole other css becomes neutralized.
    Is this the wrong code, or did i put it on the wrong place?

    thank you
    Katharina

    #348335
    Tom
    Lead Developer
    Lead Developer

    Try this:

    @media (max-width:768px) {
        #page {
            margin-top: 0;
        }
    }
    #348603
    Katharina

    Perfect. Thanks!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.