links in navbar with float:none incorrect with fluid design #5

petervandenabeele opened this Issue May 3, 2012 · 1 comment


None yet
2 participants

To reproduce: start the app and make the width of the browser very narrow.

See screen shot:

By default, in bootstrap, I see that links in .navbar have float:none.

The current design puts the navbar in the content, of which the width can be reduced
to a very small page. In that case, since the links in the navbar have float:none, they
appear under each other in an incorrect order (hiding the brand).

I was able to fix an ad-hoc solution by resetting the float:left for the navbar links.

But probably, there is a better solution ... My diff is:

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index dcfadc6..668f911 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -10,6 +10,7 @@
  *= require_self
  *= require_tree .
+ *= require_tree ./fixes

diff --git a/app/assets/stylesheets/fixes/navbar_fixes.css b/app/assets/stylesheets/fixes/navbar_fixes.css
new file mode 100644
index 0000000..cb86f81
--- /dev/null
+++ b/app/assets/stylesheets/fixes/navbar_fixes.css
@@ -0,0 +1,3 @@
+.navbar .nav > li > a {
+  float: left;

DanielKehoe commented May 12, 2012

Could you give me a screenshot of what it should look like after the fix is applied?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment