- This topic has 3 replies, 2 voices, and was last updated 6 years, 10 months ago by
.
-
Posts
-
We are creatiing a new blog using Daily Insight Pro. We want to set the main manu to sticky so that it will remain on the screen as visitors scroll down the page. How can you do that?
Hello @elviajeroaccidental,
To make the main menu sticky you have to include the JS code as well CSS .
For this activate the plugin given below:
https://wordpress.org/plugins/custom-css-js/Now after activating the plugin add below given JS code :
jQuery(window).scroll(function($) { var scroll = jQuery(window).scrollTop(); //>=, not <= if (scroll >= 100) { //clearHeader, not clearheader - caps H jQuery("#masthead").addClass("header-sticky"); } else{ jQuery("#masthead").removeClass("header-sticky"); } }); //missing );Further more add below given CSS in the location Admin Panel > Appearance > Customize > Additional CSS :
@media(min-width:993px){ .header-sticky { position:fixed; z-index : 99999; width : 100%; } }This will make your primary menu sticky.
Hope this helps.
Best Regards!!
Hi, many thanks but there is a problem.
When I go to Edit to copy the JS code in the plug-in panel, I can paste it but when I click on Update it gives a FAtal Error message and the plug-in is deactivated.I would appreciate some help.
José Luis
Hello @elviajeroaccidental,
If the suggested plugin did not work you can definitely go through the child theme approach .
Child theme References:
https://codex.wordpress.org/Child_ThemesYou can also create the child theme using the plugin given below:
https://wordpress.org/plugins/wp-child-theme-generator/After activating the child theme in your child theme functions.php file paste below given code:
https://gist.github.com/anonymous/f32b9ea583ad0597029dccb46be43ac8Hope this helps.
Best Regards!!
- You must be logged in to reply to this topic.
