#170914 Header disappears on scroll

Landing Forums JupiterX WordPress Theme Header disappears on scroll

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • 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

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

    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:

    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

    Private
    Aaron Roessler
    This reply has been marked as private.
    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

Viewing 12 posts - 1 through 12 (of 12 total)
You must be logged in to reply to this topic.
Login