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

[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

[Tom]

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 🙂

[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

[Tom]

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.

[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

[Tom]

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 🙂

[Jos]

Hi Tom,

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

Jos

[Tom]

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 🙂

[Jos]

Hi Tom,

I gave it this custom class name: slider_section

Greets,
Jos

[Tom]

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

[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

[Tom]

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;
    }
}

[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.co – hello@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

[Tom]

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! 🙂

[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

[Author]

Posts