Possible to add Top-bar to sticky menu?

Hi MrSlartibartfast

Thanks for your support, it’s most appreciated.

If you have a moment, please, take a quick look at this child theme:

https://purothemes.com/wp-content/uploads/2015/07/ultra-child-sticky-top-bar.zip

You’d need to add the /js/ folder to your child theme. Then, in your child functions.php you need to enqueue the new js file, that happens on line 8 of the above child theme. Finally, you’d need to copy the function from lines 12 to 62 into your child theme functions.php file.

If you’d like some help with this, please, ZIP your child theme and upload it to your Media Library or any other public location like Dropbox. Send the link and I can assist with the above changes.

Back online tomorrow ?? Thanks.

Hi Andrew Misplon,

Thanks a lot for your quick reply. I’m amazed with the support for the theme.

So I’ve just implemented the changes as you suggested. Also including the css from the stylesheet you provided.

At first I had an additional empty gap after the main menu, but adding display table here fixed that (and changing the id for the sentinel top-bar to top-bar-fixed so this css is not overruling my settings):

.top-bar-sentinel {
..
.
display: table;
}

After a few more small tweaks, its now working great ?? Thanks for your help!

In case anyone else is trying to do this, there is a bit more css needed for it. Which probably needs looking into it a bit in each case.

Have a nice day & thanks again ??

Awesome ?? Really glad to hear that helped. Thanks for adding the additional CSS required. Sorry for not mentioning that. I took another look at the child theme above and saw that I had the below in the child style.css file.

If anything else comes up, please, don’t hesitate to reach out.

Cheers for now ??

.top-bar-sentinel {
	-moz-transition: opacity 0.3s;
  	-o-transition: opacity 0.3s;
  	-webkit-transition: opacity 0.3s;
  	transition: opacity 0.3s;
  	opacity: 0;
  	position: fixed;
  	top: -9999px;
  	width: 100%;
  	z-index: 5000;
}

@media (min-width: 1024px) {

	.site-header.site-header-sentinel.fixed {
  		top: 38px;
  	}	

  	.admin-bar .site-header.site-header-sentinel.fixed {
		top: 70px;
	}  	

  	.top-bar-sentinel.fixed {
    	background: white;
    	opacity: 1;
    	top: 0;
  	}

  	.admin-bar .top-bar-sentinel.fixed {
    	top: 32px;
  	}

}