asked on

Need help displaying small sticky company logo in upper left when scrolling

I'm currently working on a custom WordPress site that has a sticky menu enabled, meaning that when you scroll about 100px or so down the page, the menu then remains fixed to the top of the browser. You can see it in action here:

http://dev.movingpicture.com/

Although I'm satisfied with the way the sticky menu is working, I would also like to reveal a small company logo in the upper lefthand corner, about 50px from the left edge, and about 25px from the top. The logo should only be revealed only after the user has scrolled about 180px or so down the page, and should otherwise always be hidden.

Could anyone here help me achieve this? The WordPress theme is loading the jQuery library, so I'm open to solutions that utilize it, along with whatever custom CSS might be needed.

Thanks,
- Yvan

p.s. I would prefer to implement this as something custom, rather than having to experiment with different WordPress plugins, as I have already tried a variety of different plugins (unsuccessfully).

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

egoselfaxis

ASKER

Hmm .. this seems like this very well might do the trick, .. thanks Julian!

The only thing is ... I was hoping to wrap a link around the logo, and I'm concerned that merely toggling the opacity might result in people sometimes accidentally clicking or tapping on the invisible element when they don't mean to. Is there any way that I could get around that -- without having to sacrifice the CSS animation?

Also .. should I display the logo using a different z-index .. so that it overlays my sticky menu instead of appending to it? I ask because I'm concerned that adding the logo to the same z-index layer might force my navigation menu to wrap to a 2nd line, which is a problem I've been running in to as I've been experimenting with different approaches. Any thoughts?

One other possible issue with this is that my navigation menu is being dynamically generated using this PHP code snippet .. which I think might complicate things:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>">
<span class="navbar-toggler-icon"></span>
</button>		

<?php wp_nav_menu(
array(
	'theme_location'  => 'primary',
	'container_class' => 'collapse navbar-collapse',
	'container_id'    => 'navbarNavDropdown',
	'menu_class'      => 'navbar-nav ml-auto',
	'fallback_cb'     => '',
	'menu_id'         => 'main-menu',
	'depth'           => 2,
	'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
)
); ?>

Open in new window

Thanks again,
- Yvan

ZeropointNRG

It seems your sticky nav script is giving this problems when I try it. I've seen other problems like this too regarding sticking your nav bar. Doesn't matter what z-index I give it.

SOLUTION

ZeropointNRG

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

egoselfaxis

ASKER

I ended up figuring out how to get the z-index thing working on my own (works pretty well on desktop, anyways).

http://dev.movingpicture.com/

Both of you have been very helpful, and I'd like to somehow split up the points between the both of you. It appears that I am no longer able to do that, though. Any idea as to how I might do that?

- Yvan

Julian Hansen

You should be able to select the answers that you want as the solutions - you can select more than one. You should then be able to specify points per.