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.

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.

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.

Member

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.

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.

Member

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

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.