Possible to add Top-bar to sticky menu?

  • Resolved MrSlartibartfast

    (@mrslartibartfast)


    8 years, 1 month ago

    Hi guys,

    The theme and its layout are really great – thanks for that to the developers 🙂

    I’m using the sticky menu with it and my question is:
    Is it possible to have the top-bar also sticky? (in addition to the main menu and logo)

    – I’m using a child theme in case its a simple as adding just a few more css rules.

    At the moment I’m thinking of a work-around: Adding the top bar menu links to the main navigation and only displaying it on the sticky menu and not on the ‘regular’ main menu on top.
    but if there is another solution I’d be happy to hear about it.

    Cheers

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Andrew Misplon

    (@misplon)

    8 years, 1 month ago

    Hi MrSlartibartfast

    Thanks for your support, it’s most appreciated.

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

    http://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.

    Thread Starter MrSlartibartfast

    (@mrslartibartfast)

    8 years, 1 month ago

    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 🙂

    Theme Author Andrew Misplon

    (@misplon)

    8 years, 1 month ago

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

}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Possible to add Top-bar to sticky menu?’ is closed to new replies.