Do you happen to have the plugin activated on 2 different sections? That will definitely cause a problem. For the moment the plugin doesn’t support being activated on more than 1 section at a time.
OH Yes I do< i suppose. So how would I create this and only use one section? Because the black section has different amount of columns than the menu section
Use a full width inner section for the menu or try to make use of the position settings to get elements next to each other in the same column.
but the inner section does not work either because my menu section has two columns and when i add an inner section in, it can only go above one column.
If you click a column and go to custom css in the advanced tab you can make the column width 100% on desktop with this code
@media (min-width:1024px) {
selector {
min-width: 100% !important;
}
}
If you want it to be 100% width on any screen size use this
selector {
min-width: 100% !important;
}
There are other ways of doing it but they are much more complicated. Elementor allows column width to be set only on tablet and mobile for some reason.
That does not seem to have stretched it across the whole section. Only the column, which I could do without custom code. (see website again, i would send a screenshot if i could)
Outermost section must be 1 column with the sticky on and sticky effects on. Then you can put inner sections inside that sticky section. I hope that makes sense
You’ll want the outer section to have no gaps margin or padding including it’s 1 column. No spacing anywhere so the inner sections can go to the edge
i’m still not seeing how this makes it stretch across the whole top 🙁
I’ve literally fucked up everything trying to fix this and now it’s thanksgiving and I doubt elementor support is going to be available to help me get my header back to normal. I’ve made too many revisions for me to even get back to the old good looking but non functioning properly heading! My site releases today and it looks like a disaster! 🙁
omg i figured it out!!!!!!!!!!!!! i think i fixed it. gonna go adjust the header photo on home page and see
I’m glad you figured it out. That’s a tricky thing to do.
I see you are using negative top margins on the full-screen hero section. If you are using negative margins you should turn the transparent option OFF. I would recommend putting the negative margin on the bottom of the header instead.
Something that might help is to set an exact height of each of the inner headers using the min-height setting. Say 60px for the top black section and 120px for the menu section. This will allow you to know exactly how tall the header is 180px total and this is exactly how much negative margin you need.
I hope that helps. Good job on figuring it out, it’s looking good
Thank you! It’s getting there. I did make it look good on desktop, but then the hamburger mobile menu didnt work anymore… so I actually messed up something on mobile in the process, but elementor support got back to me and made it do the right thing.
Though now, the scroll up background is gray instead of white and it seems they used custom code because the sticky header is “off” even though it’s working. so I’m waiting to hear back how to edit it.
