Community Forums › Forums › Archived Forums › Design Tips and Tricks › 2 issues adding sticky menu to Essence Pro
Tagged: essence, navigation, sticky menu
- This topic has 4 replies, 2 voices, and was last updated 6 years, 6 months ago by
GeneW.
-
AuthorPosts
-
August 12, 2018 at 9:33 pm #222415
GeneW
ParticipantHello,
I'm testing Essence Pro and have added a sticky menu, but with 2 problems.
The first problem I'm having is the sticky menu is appearing as soon as the page loads, and then disappears when I scroll, then appears as it should once I scroll past the regular menu.
Second, the scrolling sticky is stuck behind every element on the page like widgets or the text on a post.
The site is a dev clone for testing and is password protected to prevent getting hit for duplicate content, but I can easily provide a password for viewing if needed.
I sure appreciate any help with this.
Here is what I have so far:
functions.phpadd_action('genesis_after_footer','agct_sticky_menu'); function agct_sticky_menu(){ wp_nav_menu( array( 'container' => 'div', 'container_class' => 'agct_sticky nav-primary', 'menu_class' => 'genesis-nav-menu', 'theme_location' => 'primary' ) ); } add_action( 'wp_enqueue_scripts', 'agct_sticky_load_scripts' ); function agct_sticky_load_scripts(){ wp_enqueue_script('sticky_menu', get_stylesheet_directory_uri() . '/js/sticky.js', array( 'jquery' ),'1.0.0',true); }
css
.agct_sticky { display: none; position: fixed; top: 0; left:0; right:0; background:#7f7f7f; background:rgba(0,0,0,0.5); }
sticky.js
jQuery(function($){ var $mainMenu = $('nav.nav-primary'), $stickyMenu = $('.agct_sticky'); $(window).on('scroll', function() { var windowTop = $(this).scrollTop(); //get top of window var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height(); //bottom of main menu if( windowTop >= mainMenuBottom ) { //main Menu is no longer showing $stickyMenu.slideDown(); //show our sticky menu } else { $stickyMenu.slideUp(); //hide our sticky menu } }); });
August 13, 2018 at 4:17 am #222423Victor Font
ModeratorYou've got a lot of code for just adding a sticky menu. All you have to do is add position: fixed in CSS. The other code probably isn't necessary.
With sticky menus, you have to set the z-index value in CSS. The z-index is the front-to-back layer value. The higher the value, the more further forward the element.
As for the scroll issue, this is controlled by jQuery. There's nothing in the Essence Pro jQuery that causes this, so the code you added has the slideup() and slidedown() functions that are causing the problem for you.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 13, 2018 at 10:15 am #222442GeneW
ParticipantThank you very much, Victor!
I deleted the js, removed what I added to functions.php, and went with this in CSS:
.agct_sticky { position: fixed; top: 0; left: 0; right: 0; background:#000000; } div { z-index: 1; /* integer */ }
It does work in customization under additional CSS, but when I publish it's not working live in the browser.
If I could get it to work, I would like to change that background to white, but I can't find a way to use CSS to change the font color on scroll, even after searching all morning. Is that possible to do?
August 13, 2018 at 11:10 am #222452Victor Font
ModeratorAdding a z-index to div won't work because you are applying it globally to every div on the page. You have to target the menu element only.
Provide a link to the site so someone can help you. We have to view the live CSS.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 13, 2018 at 1:00 pm #222455GeneW
ParticipantFunny thing, I logged back in and now that CSS I last shared isn't working at all.
The site is https://dev.genewhitehead.com and the credentials to view is devguest with a password of devguest1.
The widgets are a mess, but it's a theme I've just started with yesterday! 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.