StealthBravo
Member
Hi guys,
@Dylan V showed me how to remove the nav links in the default navbar. Now, to integrate my Bootstrap navbar in, I'm having some issues.
I am using the following code:
I have put this code in the navigation template, right above everything else, and it works, but upon refreshing the page, it's all jumbled up. I'm guessing this is due to conflicts between the code (since they are similar in a few ways). Is there any way I can fix these conflicts? I'm trying to think of how to do it without having to rewrite it completely.
@Dylan V showed me how to remove the nav links in the default navbar. Now, to integrate my Bootstrap navbar in, I'm having some issues.
I am using the following code:
Code:
<!-- Bootstrap Core CSS -->
<link href="/home/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/home/css/modern-business.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/community">Starmine Network</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" title='Coming Soon!'>Home</a>
</li>
<li>
<a href="#" title='Coming Soon!'>About Us</a>
</li>
<li>
<a href="/community">Community Forums</a>
</li>
<li>
<a href="#" title='Coming Soon!'>Store</a>
</li>
<li>
<li>
<a href="#" title='Coming Soon!'>Vote for Us</a>
</li>
<li>
<a href="#" title='Coming Soon!'>Stats & Leaderboards</a>
</li>
<li>
<a href="#" title='Coming Soon!'>Enforcement Center</a>
</li>
<!--<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="portfolio-1-col.html">1 Column Portfolio</a>
</li>
<li>
<a href="portfolio-2-col.html">2 Column Portfolio</a>
</li>
<li>
<a href="portfolio-3-col.html">3 Column Portfolio</a>
</li>
<li>
<a href="portfolio-4-col.html">4 Column Portfolio</a>
</li>
<li>
<a href="portfolio-item.html">Single Portfolio Item</a>
</li>
</ul>
</li>-->
<!--<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="blog-home-1.html">Blog Home 1</a>
</li>
<li>
<a href="blog-home-2.html">Blog Home 2</a>
</li>
<li>
<a href="blog-post.html">Blog Post</a>
</li>
</ul>
</li>-->
<!--<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Other Pages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="full-width.html">Full Width Page</a>
</li>
<li>
<a href="sidebar.html">Sidebar Page</a>
</li>
<li>
<a href="faq.html">FAQ</a>
</li>
<li>
<a href="404.html">404</a>
</li>
<li>
<a href="pricing.html">Pricing Table</a>
</li>-->
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>I have put this code in the navigation template, right above everything else, and it works, but upon refreshing the page, it's all jumbled up. I'm guessing this is due to conflicts between the code (since they are similar in a few ways). Is there any way I can fix these conflicts? I'm trying to think of how to do it without having to rewrite it completely.
But I am inside of that. What do I edit the navigation.css?
