Pierrou Pierrou - 6 months ago 18
Javascript Question

Bootstrap: How to collapse 2 nav OR change the content of one

You're my last hope <3

I'm trying to do 2 solutions but none of them is working. (And sorry for my bad english)

Here is the Bootply : http://www.bootply.com/2aDcL7pYQZ

As you can see, I've 2 navbars. I'm trying to do 2 solutions when you resize the window for "Smartphone" (because the website will be duplicate with those 2 effects).

First solution :

First Solution

Replace the links "Faire un don" and "Recrutement" with FontAwesome glyphs next to Youtube... But it doesn't work at all, I tried all positions (absolute, ...) and to change the display (inline, inline-block) none of them works. And to be honest, I don't even know how to change it :(

Second solution :

Second Solution

Move those two links in the other navbar.
Here is a Bootply that works great : http://www.bootply.com/106921 (I found it on StackOverflow)
I tried it and many others and it still not works... It just deletes my links.

Thank you very much for your help !

Answer

Best way is to use the utilities, for example add this to your mini menu to hide them on small screens:

.hidden-xs

For the larger menu use

.visible-xs-block or .visible-xs-inline depending on how your menu is set up

http://getbootstrap.com/css/#responsive-utilities

Comments