Enjin Navigation Bar Code - Ryanthomasforbes25/Enjin-Site-Modifcations GitHub Wiki
This Is A Naviation Bar Code For All Enjin Site The Way You Will Install it is By The Enjin Site Dashboard Settings And Click Code Injection And Then paste This Code In it `
<style>@import url(https://fonts.googleapis.com/css?family=Varela+Round); @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css); /* I'll be coding a top section & fancy nav! */ body { background: #1F2225; margin: 0; color: #fff; } /* Fixing them damn links! */ a { color: inherit; text-decoration: none; } /* Navbar class */ .menubar { background: #2B3035; color: #DFE4E8; position: fixed; top: 0; z-index: 99999999; left: 0; right: 0; height: 80px; text-align: center; } a:hover { text-decoration: none; } /* Fix margins */ .menubar ul { padding: 0; margin: 0; } /* Dropdown */ .menubar ul ul { position: absolute; background: #2B3035; top: 80px; display: none; } .menubar ul ul li { font-size: 16px; display: block; padding: 8px 0px; margin: 0px 0px; } .menubar li { display: inline-block; vertical-align: top; font-family: 'Varela Round', sans-serif; transition: 160ms all ease-in-out; font-size: 25px; padding: 24px 0px; width: 120px; text-align: center; border-bottom: transparent 2px solid; cursor: pointer; } .menubar li#dd { padding: 24px 0px; } .menubar li .fa-angle-down { display: block; margin-top: -20px; top: 14px; position: relative; } .menubar ul { max-width: 1024px; margin: auto; } #customArea #l { text-align: left; } #customArea #c { text-align: center; } #customArea #r { text-align: right; } .menubar li:hover { background: #03A9F4; border-color: #0B5E83; color: #fff; text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px; } .logoHolder { background: #101d3a url('https://i.imgur.com/TwPgx7u.jpg'); height: 400px; margin-top: 80px; display: table; width: 100%; } .logoHolder .holder { display: table-cell; text-align: center; vertical-align: middle; } .logoHolder h2 { color: #fff; font-size: 54px; margin: 0; font-family: 'Varela Round', sans-serif; text-align: center; font-weight: normal; } .logoHolder button { text-align: center; color: #fff; background: none; border: #fff 2px solid; font-family: 'Varela Round', sans-serif; padding: 5px 15px; transition: 300ms all ease-in-out; font-size: 32px; margin-top: 40px; } .logoHolder button:hover { border-color: #0B5E83; text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px; box-shadow: inset #03A9F4 0px -50px; cursor: pointer; }</style><script>// I'll be coding a top section and fancy nav!
/* ==== TIP! ==== Use the dev tools (right click, hit inspect element) on your webpage to make life easier.
You can click on an element, go to the css on the right side and change the colour by clicking on it. Mega useful. */ $(function(){
$('#customArea').prependTo('.body-wrap-2');
$('.menubar li').click(function(){
$(this).children('ul').slideToggle();
});
var url = "/api/v1/api.php";
var request = {
"jsonrpc": "2.0",
"id": Math.round(Math.random() * (999999 - 100000) + 100000),
"method": "User.get",
"params": {
}
};
$(function(){
$.post(url, JSON.stringify(request), function(response) {
if (response.result) {
if(response.result.logged_in == true) {
var api = response.result;
console.log(api);
$('#customArea .logoHolder h2 span').text(api.username);
}
}
});
});
});</script>`