CODEWITHSUNDEEP
csstwitter-bootstrapoverflow
Blaszard
Blaszard

Reputation: 31975

`overflow-x: hidden` disables navbar in Boostrap - why?

I use Bootstrap v.3.2 in my responsive web app, but since the Bootstrap automatically shows the redundant horizontal space and makes the web layout look awful as well as display the horizontal scrolling bar (see this link in Github), I want to remove the redundant space in Bootstrap.

However, when I tried to write overflow-x: hidden to * as suggested in the linked issue, the layout looks good and it doesn't show the horizontal scrolling bar, but then the navbar's dropdown menu doesn't work at all (cannot be enclosed - other navbar (no dropdown link) works as usual). Why does the navbar's dropdown not work after I set overflow-x: hidden to *?

Also, when I tried to change overflow-x: hidden from * to body, then the navbar works properly but the layout doesn't change at all. Why?

Note that when I add overflow-x: hidden to .container-fluid, then the navbar doesn't work either as it was when written in *.

And finally, how can I remove the redundant horizontal space and the horizontal scrolling bar? That is what I wanted to do in the first place, so I don't mind whether I use overflow-x or not.

Upvotes: 0

Views: 1186

Answers (2)

cvrebert
cvrebert

Reputation: 9289

As noted in the issue, the correct fix is to just use container-fluid. No need to mess with overflow-x yourself.

Upvotes: 1

Devin
Devin

Reputation: 7720

because if you use * as selector, then you'll apply the styles to EVERYTHING. You can use * in descendant order of an element, or if you want to apply it to everything (just the asterisk alone equals everything), then add overflow:auto to any element where you need scroll bars, eg your navbar

Upvotes: 0

Related Questions