Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] navigation not visible on homepage with Elementor Pro slider

Home Forums Support navigation not visible on homepage with Elementor Pro slider

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #482692
    Jos

    I had this question: Can i get the navigation bar to show over the pageheader and the slider in Elementor.
    This is the website:
    http://klantwebsite4.nl/ (I would like the navigation over the slider)
    In the pages with a page header the navigation sits right on top of the image, also here I would like the navigation over the slider.

    I got this advice:check this out https://docs.generatepress.com/article/merging-header-navigation-content/

    1 I did this: the background image lines up straight under the nav menu. But that was already so with my former page-header.
    2 Now the menu is not visible on homepage with Elementor Pro slider.

    I would like the navigation over the slider so the slider (on the homepage) and the backgrounsd image on the other pages shines through.
    What i try to achive is this: http://www.praktijkmarliehouben.nl/

    Can you help me?

    Greets,
    Jos

    GP Premium 1.5.6
    #483077
    Tom
    Lead Developer
    Lead Developer

    You can actually do this without using the merge settings in the Page Header.

    You just need to add this CSS:

    .main-navigation + #sticky-placeholder + .page-header-content {
        margin-top: -45px;
        position: relative;
        z-index: 1;
    }
    
    #site-navigation {
        z-index: 100;
        position: relative;
    }

    Let me know πŸ™‚

    #483806
    Jos

    Hi Tom,

    Thanks! Now it works well on desktop.

    But when I go to tablet or mobile view the menu bar drops to low, not aligning to the top of the image. Some CSS edit to fix this?
    Thanks in advance.
    Jos

    #484141
    Tom
    Lead Developer
    Lead Developer

    It looks like you applied the negative margin to your first Elementor section instead of the page header. That Elementor section should have the same negative margin applied to desktop, tablet and mobile. It looks like it currently has a different value for tablet and mobile.

    #484391
    Jos

    Thanks Tom,

    Selecting a section in Elementor when its behind is difficult. I can’t get it right.
    Would it be easier to create a new page? Will this follow the CSS you gave me?

    Sorry for the disturbance, I still strugle with this.
    Thanks in advance.
    Jos

    #485022
    Tom
    Lead Developer
    Lead Developer

    The CSS I gave you will only work if you’re using the Page Header module, as you were when you first opened the topic.

    In order for this to work with Elementor, you would have to adjust the top margin depending on the desktop, tablet and mobile positioning. You would be able to use CSS if you give the Elementor section a class – that way you wouldn’t need to use their options.

    Let me know if you want to go that route and I’ll write up the CSS for you πŸ™‚

    #485419
    Jos

    Hi Tom,

    I would like to go that route.
    I appreciate it. Thanks.

    Jos

    #485607
    Tom
    Lead Developer
    Lead Developer

    Sounds good – can you give your Elementor section a custom class and let me know? Then I’ll go in and write the CSS specific to that class πŸ™‚

    #486267
    Jos

    Hi Tom,

    I gave it this custom class name: slider_section

    Greets,
    Jos

    #486600
    Tom
    Lead Developer
    Lead Developer

    That class is on your home page? I’m not seeing it in the HTML at all?

    #486661
    Jos

    Sorry Tom,

    That was another homepage online.
    Now i updated the site with the homepage i adjusted: the section class is called slider_sectie.
    http://klantwebsite4.nl/

    Jos

    #486909
    Tom
    Lead Developer
    Lead Developer

    I’m still not seeing that class, but I assume this would be the CSS:

    .slider_sectie {
        margin-top: -75px !important;
    }
    
    @media (max-width: 768px) {
        .slider_sectie {
            margin-top: -62px !important;
        }
    }
    #487181
    Jos

    Thanks Tom,

    This looks good now. Except some margin on both sides of the slider. (That also occured before the CSS code you provided)

    More important now the other pages who have a page header show the menu a bit to low. Whereas this was shown alright before the CSS you provided. So here’s some conflict with other CSS.

    I’m really sorry to disturb you all the time with this website, and I am grateful for your help. I hope this wil be the last time I ask help for this matter.

    Here is all the extra CSS: for the most part by Dave Foy. Except the last statements.
    /* Custom CSS by Dave Foy – https://www.designbuildweb.cohello@designbuildweb.co */

    /* Use the same method of sizing elements as Elementor does */
    body * {
    box-sizing: border-box;
    }

    /* Fix for horizontal wiggle on iPhone with GeneratePress – thanks Lyle Chamney from http://snifflevalve.com/ */
    html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    }

    /* Elementor – set some default left and right padding on mobile – same as in GeneratePress */
    .elementor-top-section.elementor-section-boxed > .elementor-container {
    padding: 0 20px;
    }

    /* 1. Don’t set padding if an Elementor library item is embdedded within another section via shortcode */
    /* 2. Don’t set padding if an Elementor library item is embdedded within a standard non-full width page */
    .elementor-top-section .elementor-top-section.elementor-section-boxed > .elementor-container,
    body:not(.full-width-content) .entry-content .elementor-top-section.elementor-section-boxed > .elementor-container {
    padding: 0;
    }

    /* 3. Don’t set padding if the section has a class of ‘nopad’ */
    .elementor-top-section.elementor-section-boxed.nopad > .elementor-container {
    padding: 0;
    }

    /* Make Elementor elements expand to fit the full available width. This is due to how Elementor puts padding all the way around columns */
    .elementor-section-boxed .elementor-column-gap-default .elementor-row {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
    }
    .elementor-section-boxed .elementor-column-gap-narrow .elementor-row {
    width: calc(100% + 10px);
    margin-left: -5px;
    margin-right: -5px;
    }
    .elementor-section-boxed .elementor-column-gap-extended .elementor-row {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
    }
    .elementor-section-boxed .elementor-column-gap-wide .elementor-row {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    }
    .elementor-section-boxed .elementor-column-gap-wider .elementor-row {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
    }

    .main-navigation + #sticky-placeholder + .page-header-content {
    margin-top: -45px;
    position: relative;
    z-index: 1;
    }

    #site-navigation {
    z-index: 100;
    position: relative;
    }

    .slider_sectie {
    margin-top: -75px !important;
    }


    @media
    (max-width: 768px) {
    .slider_sectie {
    margin-top: -62px !important;
    }
    }

    Hope this helps.

    Greets,
    Jos

    #487273
    Tom
    Lead Developer
    Lead Developer

    This should help with the margin:

    .elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated {
        padding: 0px;
    }

    As for the other issue, can you link me to one of those pages?

    Thanks! πŸ™‚

    #487284
    Jos

    Hi Tom,

    Thanks again. The white space on the sides is now solved.
    The other issue is only with tablet and mobile view. On desktop it looks good.

    Oddly http://klantwebsite4.nl/has a nav menu with a padding above te nav (the slider_sectie), while http://klantwebsite4.nl/behandeltechnieken/ looks good (page header from GP) but when i shrink the window to tablet width (hamburgermenu) the nav ducks lower.

    Thanks in advance,
    Jos

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