Header disappears on scroll

[Aaron Roessler]

Scrolling down even just 1 pixel the header disappears. Also formatting issue of menu items after breakpoint.

[Nodari]

Hey there

wp-admin is not working, can you please provide a log in link?

Regards

[Aaron Roessler]

This reply has been marked as private.

[Aaron Roessler]

I was able to get the Nav Menu to format how I want during breakpoints using CSS below. I also set the sticky menu “Offset” value to 0 so it shows up soon as the Nav menu disappears immediately after you start scrolling. Any way to keep the Main Nav visible until 200px scroll down? Then I can set the Sticky Nav Offset to “200”. Also here is a short video showing a strange Main Nav glitch upon initial scroll https://www.loom.com/share/42bb46ee637247538e45d5875e3c5482

For the second question i had in the video about the button text to be centered… The issue seems to be with a CSS class “raven-button-text-align-left” that is always there no matter what settings I choose in Elementor “Edit button”  options. If I manually change the CSS class in Console to “raven-button-text-align-center” it works as expected, see screenshot.

Sample page with those buttons: https://erici29.sg-host.com/wp-admin/post.php?post=16&action=elementor

@media (max-width: 768px) {
.jupiterx-header-overlapped:not(.jupiterx-header-fixed):not(.jupiterx-header-stick):not(.jupiterx-header-sticked) .jupiterx-header {
position: absolute;
}}

.raven-nav-menu-horizontal>.raven-nav-menu,
.raven-nav-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.raven-nav-menu-align-justify>.elementor-widget-container>.raven-nav-menu-horizontal>.raven-nav-menu,
.raven-nav-menu {
-ms-flex-pack: distribute;
justify-content: space-around !important;
}
.raven-nav-menu li.menu-item .raven-link-item.has-submenu .sub-arrow {
display:none;
}
.raven-nav-menu .raven-nav-menu-logo .raven-nav-menu-logo-link img,
.raven-nav-menu .raven-nav-menu-logo {
display:inline !important;
}

• This reply was modified 4 months ago by Aaron Roessler.
• This reply was modified 4 months ago by Aaron Roessler.
• This reply was modified 4 months ago by Aaron Roessler.

c48aee26c08457b1a174496125e22e17.jpg

[Nodari]

Hi Aaron

No need CSS codes, please try this new approach of creating a header and sticky header and it will fix all of your issues:

Creating a Sticky Header

Also, when you assign this new approach make sure sticky header is disabled form the customizer > Header
Let me know the results

Regards

[Aaron Roessler]

ah… ok great! I’ve been doing this wrong on multiple sites. But I had to modify the CSS for this to work correctly. The CSS provided in the tutorial was not working as it should so I had to add more weight to the CSS.

.jupiterx-header .elementor-10 #stickey-header {
display: none;
}
.jupiterx-header .elementor-10 #stickey-header.raven-sticky–effects, selector.elementor-sticky–effects {
display: block;
width: 100%;
}

.jupiterx-header .elementor-10 #stickey-header.raven-sticky–effects[data-element_type=”container”], selector.elementor-sticky–effects[data-element_type=”container”] {
display: flex;
width: 100% !important;
}

[Nodari]

Hey there

Aaron, thanks for sharing your solution 🙂

Not sure why it not worked in your case but its working for others for sure 😀

Regards

[Aaron Roessler]

Working on a different website and used the CSS code from that article and it did not hide the Sticky menu. Same issue I had on the other site.

Here is a video showing that the CSS provided in that article does not have enough weight and is not hiding the Container, but I cannot find out what CSS is the issue.

https://www.loom.com/share/24a4394120204316b0945114fc07e796?sid=bd091894-a3b2-40c6-8324-1bf6214a48ef

[Aaron Roessler]

This reply has been marked as private.

[Nodari]

This reply has been marked as private.

[Aaron Roessler]

I did get it working, but just wanted to point out that the CSS in this article is not enough to make it work. I had to add extra CSS.

The CSS that worked for me was:

.jupiterx-header .elementor-11329 #stickey-header {
display: none;
}
.jupiterx-header .elementor-11329 .elementor-sticky–effects#stickey-header {
display: block;
width: 100%;
}

.jupiterx-header .elementor-11329 .elementor-sticky–active.elementor-sticky–effects#stickey-header {
display: flex;
width: 100% !important;
}

[Nodari]

Aaron, thanks for sharing this with us 🙂

Regards

[Author]

Posts