[free code] Convert Enjin Menu 1.0 -> Enjin Menu 2.0 (menu maker)

5 replies
Posts:
4,787
Likes:
+2,724
Master
LEVEL 5
Screen+Shot+2018-08-27+at+9.54.50+PM_1535421315.png
Screen+Shot+2018-08-27+at+9.54.39+PM_1535421325.png

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):

Copy
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.
Posted Aug 27, 18 · OP
Love it
x 1
x 1
List
Undo
Posts:
4,787
Likes:
+2,724
Master
LEVEL 5
My module.txt literally got sent to another thread....

Here it is attached.

QA, the module.txt attachment from the OP got sent to this thread:https://www.enjin.com/forums/m/10826/viewthread/32192174-menu-20-eta/post/136090050#p136090050
Attached Files
You must login to download files.

Posted Aug 27, 18 · OP · Last edited Aug 27, 18 by AT SLAYER
Posts:
1
Likes:
0
I don't know if this is an error on my fault, but I can't get the menu to not go under the other modules.
Posted Fri at 07:34 pm
Posts:
4,787
Likes:
+2,724
Master
LEVEL 5
It' possible I messed up, cannot check right now BUT this will fix your problem:

Add this:

z-index:9999;

Inside this block of your CSS:

.menu_convert{

}

Hence making:

.menu_convert {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
z-index: 9999;
}
Posted Fri at 07:41 pm · OP
Posts:
174
Likes:
+64
Just Started
LEVEL 1
And if I am an administrator and I am the only one who understands the forum configuration, how do I obtain the API key?
Posted 6 hours ago
Posts:
4,787
Likes:
+2,724
Master
LEVEL 5
Only the owner can access the API settings menu to create and adjust keys.

Admin > Settings > API
Posted 4 hours ago · OP
Social Media
Follow us on our social media!
You will receive information, news, sneak peaks, giveaways and more!
NoticeNotices