NO CODING REQUIRED!
This is probably one of the biggest breakthroughs I've made on Enjin. Gone are the days of manually having to tweak everything you find in a Free Code thread just so it works to your liking. No longer will you have to learn HTML and other languages just to make small changes to a custom module.
This has been an idea I've been pondering for a while now, and never made it beyond the proof-of-concept stage, until now.
Here's the panel in action
Now back to the navigation bar
It runs on Bootstrap v4 and AngularJS--both powerful cutting-edge web frameworks. It adapts to your screen size seamlessly. Below are pictures of the navigation on mobile devices and on the desktop.
Forget CSS. Everything is customizable.
From the colors to the branding to whether the profile is shown or not, you can change everything.
Of course, if you want to customize it even further, I've made it super easy to customize the navigation bar. No need for awkward CSS rules anymore!
Excited? Let's Dive In.
Here's how to install it. It's an easy step-by-step guide. Follow it carefully and you should be up and running without issues.
If you're familiar with how to create modules and remove their header/footer, skip to number 10.
- Go to the Admin Panel and select Pages from the menu bar.
- (Skip 3-4 if you already have a global section across all pages)
- Click the little arrow button next to the header name and select Create Global Section. Give it a name.
- Go to each page on your site and set the header to that global section.
- Create a new module in the Header.
- Click the Container Settings button on the top right of the module box. It appears like a little cog icon next to the Delete Container button.
- Unselect all checkboxes under theContainer Theme Settings section. Click Save Settings.
- Click the Add Module button.
- On the left, under Content, click HTML. Click the Create New Module button. Give it a name like Navigation. Click OK. Click Add Module.
- Click the Edit Button on the module. (It's a pencil icon)
- Click the HTML Editor tab on the top.
- Copy and paste the code included (navigation-main.txt) into the text box. Click Save Changes.
- Go back to the Page Editor from step 1. Click Create Page.
- Name the page "Macro-Admin", change page columns to 1, give it any URL like '/panel'.
- IMPORTANT: SET PAGE ACCESS TO ADMINISTRATORS ONLY
- Set the header to the one that has the navigation bar.
- Repeat steps 6-11, giving the module a name like Navigation Admin. Create it in the Main Section of the page.
- Copy and paste the code included (navigation-admin.txt) into the text box. Click Save Changes.
- Navigate to /panel or the URL you chose for the Macro-Admin page and finish setting up your menu bar.
- Congrats! Your website just got more awesome.
As always, feedback and suggestions are greatly appreciated. I spent lots of time on this, so feel free to comment what you think!