XF 1.4 Add Bootstrap navbar

StealthBravo

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:
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.
 
Sort by date Sort by votes
Actually, I sorta got it. I found the conflicting values, although there are more.... time to search :L

Does anyone know if I can make it so only a certain div will use a stylesheet, and then a different stylesheet is used for the rest of the page? It's a massive inconvenience going through and deleting conflicting values.
 
Last edited:
Upvote 0 Downvote
Yep, im another who has tried but theres simply too many issues. XF 2.0 is slated to have a new navigation manager and I hope they incorporate the ability to use our own custom navigation rather than the one supplied, or make the new XF 2.0 nav bar have more capabilities. One of the main features im really hanging out for 2.0.
 
Upvote 0 Downvote
Shattered said:
Is it possible though? I really really want it.
Click to expand...
It is completely possible, but you'd have to go through and literally change every Bootstrap value to be something like bstrap_body instead of body. The values within both conflict. You break one, the other, or both. It's just too time consuming.

In my opinion, XF 2.0 should have all template values prefixed with xf_<element> so that it is almost impossible for any additional code to conflict with it.
 
Upvote 0 Downvote
Please don't call me stupid ;) But I am inside of that. What do I edit the navigation.css?

Do I remove all of the stuff from there and then put my navigation bar inside of there? and drop the bootstrap css into the extra.css?
 
Upvote 0 Downvote
You insert the Bootstrap nav code inside the navigation template document. Do NOT delete anything in there. Just insert it wherever you want it (where you put it will influence its location, though). Copy bootstrap.css and put all of that inside extra.css. Be warned that it will... make your forum page really screwy.
 
Upvote 0 Downvote
We managed to integrate bootstrap 3.3.1 pretty well : http://www.internet-radio.com/community/

Here's roughly how we did it :
Copy and paste bootstrap nav html into navigation template.
Copy all the css from bootstrap.css and bootstrap.theme.css into EXTRA.css.
Remove as much of it as possible without affecting the nav style. i.e. Cut chunk out, save, paste back css when it affect style.
Using Chrome's "Inspect Element" tool: Identify and fix the minor style issues with Xenforo.
Add bootstrap.min.js to PAGE_CONTAINER template.

Hopefully this might help others trying to achieve this. Its a pretty dirty way of doing it and we're sure with more time and care it could be done more elegantly but it is possible...
 
Upvote 0 Downvote
Another minor update. Theres something else in bootstrap.js (most likely the tooltip function) that conflicts with xenforo's js and makes checkboxes jump about when you hover over them. Provided you only need the dropdown js section you can safely remove the rest and it fixes the issue. The dropdown js doesn't conflict with anything in xenforo as far as I can see.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

S
  • Question Question
XF 2.3 FA icons not displaying (since 2.3) in bootstrap modal
Replies
1
Views
38
Old Nick
O
oO5 Dynasty
  • Question Question
XF 2.2 How to use Bootstrap without creating an add-on
Replies
3
Views
723
voom
V
RobinHood
Move Bookmarks Menu - Add Bookmarks Icon to user nav menu and remove tab
Replies
8
Views
1K
hakyangler
hakyangler
MegaPixel
  • Question Question
XF 2.0 How to add Navbar Images?
Replies
0
Views
1K
MegaPixel
MegaPixel
M
  • Question Question
XF 1.5 Add FontAwesome Icons to Navbar?
Replies
0
Views
681
michm0
M
Back
Top Bottom