Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
petervandenabeele opened this issue May 3, 2012 · 1 comment
Open

Comments

@petervandenabeele
Copy link

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

See screen shot: http://twitpic.com/9guudn

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
Copy link
Member

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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants