Help center navbar

HTML & CSS
1

i want a navbar centred but unsure how here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS -->
<link href="http://themodulesource.com/bootstrap_for_enjin/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
 
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://themodulesource.com/bootstrap_for_enjin/assets/js/html5shiv.js"></script>
<![endif]-->
 
 
<style>
 
 .navbar .nav .dropdown-toggle .caret{
margin-top:5px !important;
}
 
/*Your logo top positioning, will need to move top/down for smaller logos*/
.brand{
background: url('http://s27.postimg.org/bfbvhxzwz/default_logo.png') no-repeat;
margin-top:14px;
margin-left:40px !important;
}
 
/*For static page nav - Uncomment to enable
.navbar-static-top{
 
width: 4000px;
margin-left: -2000px;
margin-top: -31px;
}
*/
 
/*For fixed page nav that keeps nav centered with page alignment - Comment to disable*/
.navbar-static-top{
width: 4000px;
margin-left: -2000px;
top: 0px;
position:fixed;
z-index:9000;
}
 
/*For fixed option, for true fixed positioning use class navbar navbar-fixed-top*/
 
.navbar-fixed-top .container{
margin-left: 60px;
}
 
 
/*This controls the positioning of your nav, as in, where the nav sits on the left side, align with your page!*/
.navbar-static-top .container{
margin-left: 2000px;
}
 
 
 
/*Removes bullets from nav*/
.navbar .nav {
list-style:none !important;
top:3px !important;
 
}
 
/*On hover, or active, the highlighted area of the top nav items highlight top to bottom, this is also the selection area*/
.navbar .nav > li > a {
padding-top:12px;
padding-bottom:12px;
}
 
/*Removes bullets from Enjin nav*/
.dropdown-menu {
list-style: none outside none !important;
}
 
 
 
/*If you have a drop down header, this positions it better*/
.dropdown .dropdown-menu .nav-header {
padding-left: 10px;
}
 
 /*START ENJIN BAR NAV POSITIONING*/
 
/*Our nested admin and profile menus*/
 
#boot_admin{
margin-top:0px;
 
}
 
#boot_admin a:nth-child(1){
display:none;
}
 
#boot_profile{
height:30px;
}
 
#boot_profile .element_username{
color: rgb(119,119,119) !important;
text-shadow: 0px 1px 0px rgb(255, 255, 255);
text-decoration:none !important;
}
 
#boot_profile span:hover{
background-color: transparent;
color: rgb(51, 51, 51) !important;
text-decoration: none;
}
 
 
/*Changes our enjin dropdown caret to something that is close to twitter's caret object*/
#enjin-bar .arrow{
border-top:4px solid transparent;
border-top-color:rgba(0, 0, 0, 0.5);
border-right:4px solid transparent;
border-bottom:4px solid transparent;
border-left:4px solid transparent;
/*top:23px;
IF FIXED POSITION position:fixed;
*/ top:3px;
}
 
/*Changes our enjin dropdown caret to something that is close to twitter's caret object(Part 2 for border)*/
#enjin-bar .arrow:after{
border-top:6px solid transparent;
border-top-color:rgba(255, 255, 255);
border-right:6px solid transparent;
border-bottom:6px solid transparent;
border-left:6px solid transparent;
top:3px;
}
 
/*Changes the style of our entire dropdown box to mimick Boot strap style*/
.element_dropdown_menu.element_popup.enjinbar-menu{
margin-top:16px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
border:1px solid #ccc;
border:1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
z-index:99999;
}
 
/*Our inner elements of our entire enjin drop down*/
.element_popup .inner {
background-color: white !important;
text-decroation:none;
list-style:none;
border:none;
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
color:#000 !important;
}
 
 
/*Popover-dropdown profile*/
.enjinbar-menu-user .info{
background-color:white !important;
}
 
/*Caret of profile hover items*/
.enjinbar-menu-user .info .rtri div{
border-left-color:gray !important;
margin-left:3px;
}
 
 
 
/*Text - Our inner elements of our entire enjin drop down*/
.element_popup .inner li a{
color:#333;
font-size:12px;
font-family:Arial;
padding:6px 20px !important;
}
 
/*Text - Hover - Our inner elements of our entire enjin drop down*/
.element_popup .inner .menu-link:hover{
text-decoration:none;
color:#ffffff;
background-color:#0081c2;
background-image:-moz-linear-gradient(top, #0088cc, #0077b3);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);
background-image:-o-linear-gradient(top, #0088cc, #0077b3);
background-image:linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
 
/*Enjin Divider lines to look...better*/
.element_popup .inner .menu-divider-line{
background-color: #E5E5E5 !important;
border-bottom: 1px solid white !important;
height:1px !important;
opacity:0.4;
}
 
/*Profile drop down item hover events*/
.element_popup .inner .item:hover{
background-color: rgb(0, 129, 194);
background-image: linear-gradient(to bottom, rgb(0, 136, 204), rgb(0, 119, 179));
}
 
/*Profile drop down text style*/
.element_popup .inner .item a{
text-decoration:none;
font-weight: normal;
margin-bottom:-5px; /*Reduces some spacing..since menu is huge*/
color: rgb(51, 51, 51);
font-family:arial;
}
 
/*Profile drop down text style - hover*/
.element_popup .inner .item a:hover{
color: rgb(255, 255, 255);
}
 
/*Font,text - Our site box at bottom of profile dropdown*/
.sitebox a {
font-size:10px !important;
color:#333;
margin-left:-20px;
background-color:transparent;
}
 
/*Font,text, make less default space - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox{
margin-bottom:10px;
}
 
/*That damn gear! - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox .gear {
background-position: 40px 0px; /*Removes Enjin's mysterious extra icons*/ }
 
/*Text for site urls - Our site box at bottom of profile dropdown*/
.sitebox .url{
color:#333;
}
 
/*Our visible username text*/
#enjin-bar .element_username{
color:#333;
text-shadow: 0px 1px 0px rgb(255, 255, 255);
text-decoration:none;
}
 
/*Removes our likes etc.*/
#enjin-bar #enjin-bar-likes{
display:none !important;
}
 
/*Removes site info,site name and our admin gear*/
#enjin-bar .left a:nth-of-type(1),#enjin-bar .left a:nth-of-type(2),#enjin-bar .left a:nth-of-type(3){
display:none !important;
}
 
/*creates a default right position for our admin, fixed, position manually on your fixed nav*/
#enjin-bar .left{
margin-top:8px;
z-index:9999;
margin-left:530px;
position:fixed;
}
 
/*Our admin text*/
#enjin-bar .left a{
color: rgb(119, 119, 119);
font-size:13px;
text-decoration: none;
font-size:13px;
font-family:Arial;
text-shadow: 0px 1px 0px rgb(255, 255, 255);
}
 
/*Our admin text on hover*/
#enjin-bar .left a:hover{
color: rgb(51, 51, 51);
text-decoration:none;
}
 
/*END Enjin bar nav positioning*/
 
 
 
 
</style>
 
</head>
 
<body>
 
 
 
 
 
<!-- Part 1: Wrap all page content here -->
 
<!-- Fixed navbar -->
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#"></a>
<ul class="nav">
<li><a href="http://www.sherifftiddles.com/"><i class="icon-home"></i>Home</a></li>
<li><a href="http://www.sherifftiddles.com/forum"><i class="icon-edit"></i>Forums</a></li>
<li><a href="#about"><i class="icon-gift"></i>Store</a></li>
<li><a href="http://www.sherifftiddles.com/contact"><i class="icon-envelope"></i>Contact Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.sherifftiddles.com/chat">Chat</a></li>
<li><a href="http://www.sherifftiddles.com/members">Members</a></li>
<li><a href="http://www.sherifftiddles.com/gallery">Gallery</a></li>
<li class="divider"></li>
<li class="nav-header">Extras</li>
<li><a href="http://www.sherifftiddles.com/recruitment">Recruitment</a></li>
<li><a href="http://www.sherifftiddles.com/events">Events</a></li>
</ul>
</li>
<li id="boot_admin"></li>
<li id="boot_profile"></li>
<li id="boot_join"></li>
<li id="boot_login"></li>
<li id="boot_register"></li>
</ul>
</div>
</div>
 
 
 
 
 
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://themodulesource.com/bootstrap_for_enjin/bootstrap.min.js"></script>
<script src="http://themodulesource.com/bootstrap_for_enjin/bootstrap.js"></script>
<script src="http://themodulesource.com/bootstrap_for_enjin/bootstrap-dropdown.js"></script>
 
<script> 
$(document).ready(function(){ 
$('#enjin-bar .left a[href$="/admin"]').appendTo($('#boot_admin')); 
$('#enjin-bar .right .user a').appendTo($('#boot_profile')); 
$('.navbar-static-top').prependTo($('#page')); 
$('#enjin-bar a[href$="/login"]').appendTo($('#boot_login'));
$('#enjin-bar a[href$="/register"]').appendTo($('#boot_register'));
 
 
 
}); 
</script>
 
 
 
 
</body>
</html>

thanks :smiley:

2

Hi zacfmc. Welcome to the forums. :slight_smile:

Try this instead:

.navbar .nav {
position: relative;
left: 0;
/* display: block; */
/* float: left; */
[COLOR="#FF0000"]margin: 0 auto;
display: table;
padding: 0;[/COLOR]
}

That will center it in the container … although the container itself is not centered on screen.

3

where abouts and what do you mean :stuck_out_tongue:

4

I didn’t notice that those styles are in the bootstrap.min.css file, line 325. You aren’t meant to edit those, but you could override them in your own:

.navbar .nav {
float: none;
margin: 0 auto;
display: table;
padding: 0;
}