Bootstrap Navigation Bar

8 replies
Posts:
80
Likes:
+25
Just Started
LEVEL 1
So many people have been asking for a bootstrap navigation bar. I personally think that people shouldn't be selling these open source codes unless they customize like these ones http://www.fc-mc.net/ http://www.mcvrworld.com/. This is a code for the a normal white navigation bar hope you like and the css code i have linked to my css that I did so dont worry about the css unless u want to copy and edit it by yourself Hope you Like.

<div class="m_html" style="padding: 0px; margin-bottom: -1px;"><script>
$(document).ready(function() {
$("#enjin-bar .left #enjin-bar-likes").remove();
$("#enjin-bar .left .divider").remove();
});
</script>


<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div style="margin: 0 auto; max-width: 1040; min-width: 954px;">
<ul class="nav">
<li class="dropdown" onmouseover="this.className = 'dropdown open';" onmouseout="this.className = 'dropdown'"><a href="www.mcvrworld..com" class="dropdown-toggle brand" data-toggle="dropdown" style="background: url('') no-repeat; background-position: left center;">   Name
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="divider"></li>
<li class="disabled"><a href="http://www.graphicspod.enjin.com/"><strong>Designer
</strong></a></li>
<li><a href="#"> List</a></li>
<li><a href="#">List</a></li>

</ul></li>

<li><a href="/home"><i class="navico-home"></i> Home</a>



<li><a href="/list"><i class="navico-comment"></i> List</a>
</li>




<li class="dropdown" onmouseover="this.className = 'dropdown open';" onmouseout="this.className = 'dropdown'"><a href="/designer" class="dropdown-toggle" data-toggle="dropdown"><i class="navico-user"></i> Menu<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/">List</a></li>
<li><a href="/">List</a></li>
<li><a href="/">List</a></li>
<li><a href="/">List</a></li>
</ul></li>

<li class="dropdown" onmouseover="this.className = 'dropdown open';" onmouseout="this.className = 'dropdown'"><a href="/checkout" class="dropdown-toggle" data-toggle="dropdown"><i class="navico-shopping-cart"></i> Menu<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/order">Menu</a></li>

</ul>
<li><a href="/"><i class="navico-star"></i> Menu</a>
</div>
</div>
</div>
<br>
<br></div>
<link href="http://files.enjin.com/387862/Top nav/Bootstrap.css" rel="stylesheet" type="text/css">
<script>
if (window.console && (window.console.firebug || window.console.exception)) {
//Firebug is enabled
}
</script>


Visit here to change the icons http://twitter.github.io/bootstrap/base-css.html#icons
Enjoy and Please visit my site graphicspod.enjin.com If you want any web redesigns My site is currently under construction
Posted Jul 8, 13 · OP
Posts:
1
Likes:
0
are u allowed to remove enjin bar?
Posted Jul 8, 13
Posts:
1,829
Likes:
+311
Experienced
LEVEL 3
are u allowed to remove enjin bar?
Bootstraps are allowed on Enjin websites, you will need to manually code the script in a HTML module.
Posted Jul 8, 13
Posts:
80
Likes:
+25
Just Started
LEVEL 1
Yes you are @xymanek
Posted Jul 8, 13 · OP
Posts:
4,409
Likes:
+2,427
Master
LEVEL 5
Hello Blare,

I agree with your statement that boot strap is a bit taboo to charge for it (being that it is technically just a copy / paste in most installations). I actually posted a tutorial here:

http://www.enjin.com/forums/m/10826/viewthread/7628074-bootstrap-navbar-easy-installation-guide-source-files

You are welcome to contribute to this thread. Your above markup,though, is missing the dropdown / min javascript that makes the dropdowns functional!

Believe it or not, the examples you gave are not boot strap nav bars they are actually what are called the "curse nav bars" around here. They utilize the suckerfish drop downs and do not contain the twitter base css. Ultimately the curse bar is easier to install, but it offers less expansion for those with little coding experience, unfortunately.
Posted Jul 8, 13
Posts:
80
Likes:
+25
Just Started
LEVEL 1
Thanks for this contribution AT SLAYER, just a young designer hoping to help others. I love to learn from you experienced guys later on the forums :d
Posted Jul 8, 13 · OP
Posts:
25
Likes:
+8
Thank you for the css but I do not get how to center the links as https://oc.tc/ do, if any one could share that vital information with me, that would be awesome.
Posted Jul 31, 13
Posts:
80
Likes:
+25
Just Started
LEVEL 1
As i see this is not the navigation bar from my tutorial goto At Slayers Tutorial he posted a few comments above :d
Posted Jul 31, 13 · OP
Posts:
162
Likes:
+38
Just Started
LEVEL 1
Dang Blare :3
Posted Jul 31, 13
Notices