1. 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

Discussion in 'Styling and Customization Questions' started by StealthBravo, Jan 27, 2015.

  1. 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.
     
  2. StealthBravo

    StealthBravo Member

    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: Jan 27, 2015
  3. Shattered

    Shattered Member

    can you help me with this? I might pay.
     
  4. StealthBravo

    StealthBravo Member

    I ended up just not doing it. Too many values in the XF framework conflict with Bootstrap, making it basically impossible.
     
    tajhay likes this.
  5. tajhay

    tajhay Well-Known Member

    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.
     
  6. Shattered

    Shattered Member

    Is it possible though? I really really want it.
     
  7. StealthBravo

    StealthBravo Member

    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.
     
  8. Shattered

    Shattered Member

    Hmmm. I would take the time in doing it if someone would show me how....
     
  9. Shattered

    Shattered Member

    Lets say I have took the time and changed all of the values... How do I put the navigation bar into xenforo?
     
  10. StealthBravo

    StealthBravo Member

    Once you've done that, it's as simple as adding it to the correct templates. Put the CSS in EXTRA.css, the actual navbar code in header or navigation.
     
  11. Shattered

    Shattered Member

    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.
     
  12. StealthBravo

    StealthBravo Member

    Home > Styles > Your Theme Name > Templates
     
  13. Shattered

    Shattered Member

    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. StealthBravo

    StealthBravo Member

    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.
     
  15. Shattered

    Shattered Member

    Alright, I will try it, Thank you so VERY VERY much ;) Ima try it and see if I have any more questions or difficulty.
     
  16. Internet-Radio.Com

    Internet-Radio.Com New Member

    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. Internet-Radio.Com

    Internet-Radio.Com New Member

    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.
     
  18. Dylan V

    Dylan V Well-Known Member

Share This Page