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

Navbar items wrong position when in state "collapse in", with any navbar-toggleable-* #20392

Closed
os1r1s110 opened this Issue Jul 28, 2016 · 4 comments

Comments

Projects
None yet
3 participants
@os1r1s110

os1r1s110 commented Jul 28, 2016

When using the new navbar component, there is a little problem with the alignment of the list items which appear right aside the navbar-brand when viewing the collapsed menu.

I don't really know how to explain it clearly so here is an image which shows what I mean exactly. Maybe it's not a bug and if so, just tell me and I'll abide to your decision :P. IMO, the Home link should stand on it's own line. If we put a bigger navbar-brand, the problem gets even clearer as multiple items will be right beside the logo/brand image and others will flow under normally.

navbar_before_clear

To reproduce, simply go the bootstrap 4 navbar documentation. The last example, the responsive one, will show this "bug" when window is resized enough to display the hamburger icon.

Then simply expand the navbar and it should be right there.

Reproduced on Edge 25.10586.0.0 and Chrome 52.0.2743.82 on Windows 10. Not tested on other browsers.

I found a possible fix to this problem by adding a clear when the navbar is in "collapse" mode and viewed.

https://gist.github.com/os1r1s110/7379c3ba0a0472a7c8b3da977864d041

navbar_after_clear

@os1r1s110

This comment has been minimized.

Show comment
Hide comment
@os1r1s110

os1r1s110 Jul 28, 2016

Don't know why my gist link doesn't work... When copy-pasting the link it seems to work but not when clicking it directly... I'll try to find a better way to share the snippet.

os1r1s110 commented Jul 28, 2016

Don't know why my gist link doesn't work... When copy-pasting the link it seems to work but not when clicking it directly... I'll try to find a better way to share the snippet.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jul 28, 2016

Member

Please use JS Bin or CodePen for sharing demos/test cases.

Member

cvrebert commented Jul 28, 2016

Please use JS Bin or CodePen for sharing demos/test cases.

@cvrebert cvrebert added css v4 labels Jul 28, 2016

@cvrebert cvrebert changed the title from V4 Navbar items wrong position when in state "collapse in", with any navbar-toggleable-* to Navbar items wrong position when in state "collapse in", with any navbar-toggleable-* Jul 28, 2016

@os1r1s110

This comment has been minimized.

Show comment
Hide comment
@os1r1s110

os1r1s110 Jul 28, 2016

@cvrebert All right I will try to do that in the future. But I have one question, how do I make corrections using codepen? I found how to load the newest bootstrap version (alpha 3) but not the v4-dev branch in it so I don't really know how it can be used to show bugs/solutions. Do I simply put the new scss and assume it will overwrite?

os1r1s110 commented Jul 28, 2016

@cvrebert All right I will try to do that in the future. But I have one question, how do I make corrections using codepen? I found how to load the newest bootstrap version (alpha 3) but not the v4-dev branch in it so I don't really know how it can be used to show bugs/solutions. Do I simply put the new scss and assume it will overwrite?

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Oct 19, 2016

Member

Resolved in #19890.

Member

mdo commented Oct 19, 2016

Resolved in #19890.

@mdo mdo closed this Oct 19, 2016

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