Custom Menu Link


#1

Hello,

I’d like to add a link to the menu where a Vimeo video pops up when it is clicked on. The following solution seems to work pretty well, but not sure where to edit the menu contents?:

I would just upload the .js files and .css file, and then edit the menu, correct?


#2

Hi,

Steps in order to enable popup:
1. Install and activate https://wordpress.org/plugins/iw-magnific-popup/
2. Create custom menu link with some dummy url like this http://screencast.com/t/Ujr1LGmiur
3. Preview your page in google chrome and inspect it with developer tools in order to use corect menu item ID http://screencast.com/t/alHjJaJoG89 , your ID will be different
4. Edit theme folder / js / scripts.js file and paste custom js code below at the end of file

//vimeo popup
jQuery(document).ready(function($) {
	$('#menu-item-1799 a').magnificPopup({
	    items: [
	      {
	        src: 'http://vimeo.com/123123',
	        type: 'iframe' // this overrides default type
	      }
	    ]
	})
});

Remember to replace ID inside the code with your ID. Also you can search for some plugin which can enqueue java script and paste the code inside that plugin. Also remember to replace src for vimeo video with your vimeo url.

5. Last thing is to add custom css code in order to fix z-index for vimeo popup window. You can apply custom css code with simple custom css plugin.

.mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.mfp-ready {
    z-index: 10000;
}

Finally result should look like this - http://screencast.com/t/gTcTyh0oi

Please note that for this kind of edits you should consider using child theme, create file structure like it is in main theme and make edits from there. In this way your changes will be permanent after theme updates.

Best Regards