Temporary live link:https://atslayer.enjin.com/enjinmenuconvert
It has been a while since Enjin disabled the Enjin menu 2.0 - This thread is a pile of code that will allow you to convert your menu 1.0 into a 2.0 style with minimal effort. The entire thing is completely stylable leaving you with more options.
Now, to style it, you do need to edit the CSS but I assure you it is not that complicated. The most complicated part is configuring your Enjin API settings.
Enjin API Configuration
Only the site owner can configure this:
- Admin > Settings > API
- Create a custom key, copy the key (we'll need it later)
- Now select the API menu link again to reload the page
- Select your custom key
Enable these methods:
- User: get
- Site: getCurrentSiteInfo
- Site: likeSite
Configuring/installing the module
1) Make a new container in the site header, remove container graphics and themes (uncheck all)
2) Add your enjin menu 1.0 below it.
3) Copy the attached module.txt into an html module (in the html source tab) -> Hit Save.
4) Now go into the settings of that module and disable 'display padding'.
5) Now, in the html source tab (never use visual editor) -> Find and edit these variables (be careful not remove the ' quotes):
var enjin_api = 'ENTER API KEY'; var my_site = 'https://MYSITE.com';
Technically, you should now have a fixed top menu that has:
- an API site like button (only visible to logged in users due to enjin.com/api requirement of login)
- an API profile drop(with conditional admin)
- a conditional join-site link that shows for unregistered members
- a conditional login / register button
- a series of links based on your menu 1.0 navbar.
All the script does, save from the cool api stuff, is copy the links from your 1.0 menu and paste into a new one. The benefit here, as I said, is that we have more options for this navbar (options currently not available in the 1.0 menu).
Editing the styles (basic)
Important: Never use the visual editor for an HTML module
I commented what everything is in the top section of the <style>, it is pretty self explanatory. I took all of the layout stuff and put them lower for those people that want to make more advanced edits. I will just provide some basic notes here:
What is .nav_spacer?
This style spaces the page so that when you set your navbar block (.menu_convert) to fixed, nothing gets hidden below it.
- If you disable the fixed positioning of .menu_convert, just set this height to 0
- If you make the overall navbar taller in any way (ie font change or padding) then you will need to increase the .nav_spacer height.
Can I add socials and anything MANUAL to the navbar?
Yes, but I would stay away from adding content to .nav_left from the bottom navbar (.nav_main).
As always I am open to providing assistance here when I can, I hope this helps the many of you that are stuck with menu 1.0.