Navbar exceeds the length of the page content when move to the left

Question

I'm building a Navbar with react-bootstrap, but come across the following problem.

When I scroll to the top/right/bottom or keep the page still, everything looks fine.

But when I scroll to the left, there is a white space appear on the right of the content, making navbar exceeding the length of the main body.

Here's my script:

const HomePage = () => {
  return (
    <div id="homePageTitle">
        <h1>Home Page</h1>
    </div>
  )
}


class Header extends React.Component {
  render() {
    return (
        <div>
          <Navbar inverse collapseOnSelect id="navbar">
            <Navbar.Header>
              <Navbar.Brand>
                <p>Brand</p>
              </Navbar.Brand>
            <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
              <Nav pullRight>
                <NavItem eventKey={1}>Home</NavItem>
                <NavItem eventKey={2}>Projects</NavItem>
                <NavItem eventKey={3}>Passions</NavItem>
                <NavItem eventKey={4}>Contact</NavItem>
              </Nav>
            </Navbar.Collapse>
          </Navbar>
          <HomePage />
        </div>
    )};
  }

Here's my css:

/*---------Header----------*/
.navbar-brand {
    min-height: 100px;
}

.navbar.navbar-inverse{
    width: 100%;
    height: 100px;
    margin-bottom: 0;
    background-color: lightskyblue;
    border: lightskyblue;
    border-radius: 0;
    position: fixed;
    top: 0;
    transition: opacity 0.5s;
}

.navbar-right {
    margin-top: 30px;
    font-size: 18px;
} 

/*---------HomePage----------*/

#homePageTitle {
    padding-top: 80px;
    padding-bottom: 420px;
    width: 100%;
    text-align: center;
    background-color: lightcoral;
    margin: 0;
    color: #507e9a;
}

Even just a clue as to why this happens is much appreciated! Thanks!

Could you build us a working example of your problem on https://codepen.io/? — Ricky Dam, Jul 21 '17 at 19:05
@RickyDam I have built a [similar example](https://codepen.io/Liutongchen/pen/KvPWRL) (same css, minor change to JS because it seems that I need these changes to use react-bootstrap's Navbar in codepen). But the problem doesn't show up in codepen's version. I'm so confusing right now :( — Liutong Chen, Jul 21 '17 at 21:07
You mentioned to Don that you simply decided to disable the horizontal scroll. Are you going to go with that or do you want me to try and find you an alternate way? — Ricky Dam, Jul 21 '17 at 22:53
@RickyDam Hi, sorry I didn't tell you. I'm going to simply disable the horizontal scroll. Thanks for trying to help. — Liutong Chen, Jul 21 '17 at 23:03

Don · Answer 1 · 2017-07-21T19:14:15.913

0

The body has a default margin of 8px. If you want the whitespace there, then add the same

margin: 0 8px;

to the navbar class. Alternatively you could add:

body{
    margin: 0;
}

and that would remove the white space altogether. This happens because the #homePageTitle is still in the document flow whereas the navbar being position: fixed is removed from document flow and thus isn't influenced by the margin of the body since it is no longer bounded by it.

You can see this even more by adding:

body{
    position:relative;
}

This will set body as the context for the navbar to be fixed in, and thus be influenced by the body's margin yet again. This is probably the preferred way to do it if you want to keep the margin there as you won't need to set margins on any other position: fixed elements.

Without being able to play around with the page itself it's hard to say for sure, but I'm fairly sure this is your issue.

edited Jul 21 '17 at 19:14

answered Jul 21 '17 at 19:09

Don

3,987
15
32

Thanks for the answer. But the truth is, I have already added `position:relative` to `body`, and I also try the other two suggestions you proposed, but the problem still exists. I try to build a [working example](https://codepen.io/Liutongchen/pen/KvPWRL) in codepen, but the problem does't show up. Do you have any idea why this might happen? – Liutong Chen Jul 21 '17 at 21:10
Hi, Don. I've found someone with a similar problem and decide to simple disable horizontal scroll. https://stackoverflow.com/questions/17756649/disable-the-horizontal-scroll – Liutong Chen Jul 21 '17 at 21:38
1

I don't really recommend disabling horizontal scrolling. If you didn't want it there then it's a fine hack, but there's a fundamental reason why your header is growing too wide and figuring that out is going to give you cleaner CSS in the end. Now to me it sounds like a padding/margin issue. have you tried `box-sizing: border-box;`?? – Don Jul 24 '17 at 17:46
Yes, I have already tried `box-sizing: border-box` and the problem is not solved. Do you think it's possible that the problem is caused by some default setting of the browser itself (as suggested in the post I mentioned above) ? – Liutong Chen Jul 25 '17 at 18:10
If it was a default browser setting then I'd expect it to show up in codepen. And I really can't think of anything else without being able to see and play with an example of it. Sorry :/ At least you have something of a solution though. – Don Jul 25 '17 at 18:16
Thanks for trying to help :) – Liutong Chen Jul 25 '17 at 18:23

score 0 · Accepted Answer · answered Jul 21 '17 at 23:05

0

I have found someone with a similar problem and it is solved by disabling horizontal scroll as suggested in this post. This perfectly solves my problem.

answered Jul 21 '17 at 23:05

Liutong Chen

2,915
5
22
29

Navbar exceeds the length of the page content when move to the left

2 Answers2