Docs

[Alan]

Hi. Thanks for all of your knowledge of X, css, scripting and coding tricks that are part of standard support!

Several related questions that I hope are alright to combine. The site is realhdr.com.

1. I saw the CSS at the bottom to delay logotext appearance until scrolling started, and it works well at realhdr.com on desktop displays. What can I add to delay logotext appearance until the user scrolls down to a point I specify where the logo graphic scrolls off the screen, and then have it disappear again when the user scrolls up to a point I specify where the logo will be visible? I have the logo graphic as part of the landing page image right now and don’t want to show the text logo until the landing page image scrolls out of view.

2. I also need to keep the logotext visible on mobile and tablet portrait from the page refresh and never have it disappear. No change to the way it scrolls off now to save screen real estate, but I need the logotext to appear on page refresh instead of the blank white space waiting for scrolling.

Many thanks.

I used this to delay logotext appearance:

.home .x-navbar .x-brand {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s linear;
}

.home .x-navbar.x-navbar-fixed-top .x-brand {
opacity: 1;
visibility: visible;
transition: opacity 0.5s linear;
}

[Alan]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please update this block of code :

.home .x-navbar .x-brand {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s linear;
}

to :

.home .x-navbar .x-brand {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s linear;
}

#2 Please wrap all desktop related code within media query rule.

e.g:

@media (min-width:979px){
.home .x-navbar .x-brand {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s linear;
}

.home .x-navbar.x-navbar-fixed-top .x-brand {
opacity: 1;
visibility: visible;
 transition: all 0.5s linear;
}

}

Hope it helps.

[Author]

Posts