• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Add Bootstrap navbar

#1
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.
 
#2
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:

tajhay

Well-known member
#5
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.
 
#7
Is it possible though? I really really want it.
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.
 
#11
I am new to xenforo, I get what your meaning, but I don't know how to use the control panel... So I wouldn't know where to find anything.
 
#13
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?
 
#14
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.
 
#16
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...
 
#17
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.