White Text Logo disappears when scrolling down.
-
Hi my logo img has white text with a transparent background. When I scroll down it disappears into the white masthead. What CSS code can I use to change the masthead colour to a darker colour as I scroll down and to also change the navigation to white colour text.
Further-more on the mobile version the top bar where the logo and hamburger menu sit, is also where my logo disappears, so need CSS code that will make that part darker.
My website is: http://www.pivotpointmarketing.co
The blog I need help with is: (visible only to logged in users)
-
Hi,
On my desktop monitor screen I find that the logo disappears only momentarily, for less than a second, before reappearing. I don’t know if that behavior can be eliminated, but I’ll call for staff attention staff will respond here.
-
-
I don’t see it disappear at all, but perhaps the behavior could be related to the browser.
Here’s an example of what I see under Firefox 68.0.1, and there is no flicker, the masthead simply appears to stay pinned to the top: https://cld.wthms.co/o2kXvc
I do see what @musicdoc1 is describing under Chrome 76.0.3809.100, but again the end result is fine, it’s just a fast fade-in: https://cld.wthms.co/6KsuxJ
I believe Chrome’s behavior is because, coding-wise, there’s one instance of the masthead at the top, and another masthead that appears when scrolling. Chrome seems to handle the fade-in effect, while Firefox can’t, which ironically results in Firefox looking like it’s the only one that’s doing it right.
There’s no way to change this via CSS.
@rajathimself if the logo is remaining white-on-white for you, let’s try a few things:First, please make sure that your browser is up to date: https://browsehappy.com/
If it is not, please try updating your browser or switching to a different browser.
If it is, please do these two things:
1. Try clearing your browser’s cache and cookies.
2. Try with all browser extensions or add-ons temporarily disabled.
Please let us know how each step goes for you, and which browser (and version of) you’re using if you’re still having trouble.
-
Whoops, I left out the mobile part.
When viewed on a proper mobile device, the masthead does not follow, it remains at the top of the site. This is to preserve content space on the smaller screen.
-
staff-blorbo,
I haven’t yet learned how to create animated screenshots, but let me try to describe what I’m seeing more clearly. This only happens at the very beginning of scrolling. While viewing the site https://pivotpointmarketing.co/ on my desktop monitor screen, using the latest Firefox, I find that both the site logo and the header menu, which are originally superimposed over the header image, disappear momentarily before being replaced by a gray menu bar that includes both the logo and the menu. This bar then immediately becomes pinned to the top of the screen as I continue to scroll. It remains pinned there throughout scrolling, unless I scroll back up to the top, whereupon the disappearance-transformation process described above occurs in reverse.
-
-
While viewing the site https://pivotpointmarketing.co/ on my desktop monitor screen, using the latest Firefox, I find that both the site logo and the header menu, which are originally superimposed over the header image, disappear momentarily before being replaced by a gray menu bar that includes both the logo and the menu
This is by design, and happens because the fixed/sticky header is designed to scroll down into view rather than simply just appearing in place of the non-scrolled header. So the theme first hides the main header, and then scrolls the sticky header in from offscreen.
@rajathimself, I see you’ve since been helped via live chat, and you have an email ticket open that we created in follow-up to a chat. Please reply to that ticket if you have any further questions, as we’re better able to help with your Business Plan site there. -
Thanks. : ) I presumed it was by design. The reason I described the effect I noticed is that I thought that might be what @rajathimself was referring to. Otherwise I don’t see any disappearance of the logo. It certainly doesn’t disappear into anything white (confession: I don’t know what a masthead is), because it displays on a gray background immediately after scrolling begins, and remains within that gray background.
-
Yeah, the OP was rather referring to an issue of a white logo on a white background, and it looks like we’ve already helped with the CSS for that in live chat, which is why it’s grey now.
(the masthead is the top section containing the title, header image, menu, etc. If you look at the HTML in the browser inspector you’ll see that section typically has a
.mastheadclass.) -
- The topic ‘White Text Logo disappears when scrolling down.’ is closed to new replies.
WordPress.com Forums 