Navbar isn't fixed on mobile

archit-p commented 4 years ago

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.9.1] My browser is: Firefox v80.0.1

Description

Navbar made fixed using is-fixed-top does not stay fixed.

Steps to Reproduce

Copy the following into an html file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello Bulma!</title>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
/>
</head>
<body>
<div id="root" class="pt-6">
  <nav
    class="navbar is-fixed-top"
    role="navigation"
    aria-label="main navigation"
  >
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img
          src="https://bulma.io/images/bulma-logo.png"
          width="112"
          height="28"
        />
      </a>
    </div>
  </nav>
  <div class="columns">
    <div class="column">
      <div class="section">
        <p class="title">Section 1</p>
        <p class="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="section">
        <p class="title">Section 2</p>
        <p class="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="section">
        <p class="title">Section 3</p>
        <p class="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Open page in browser.
Go to dev tools and switch to mobile view.
Ensure touch simulation is on.
Try scrolling down, navbar doesn't remain fixed.
Actual behavior

Navbar scrolls halfway i.e. upto half its height and then remains fixed. See screenshot below.

reima commented 4 years ago

This seems to be caused by the negative margins (specifically margin-right) on the <div class="columns"> element. If you add the is-gapless class on it, the navbar stays fixed. I'm not sure how to fix this though, as the negative margins are needed for the column gaps not to show up on the sides.

archit-p commented 4 years ago

@reima adding is-gapless / my-0 mx-0 did fix this issue!

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

anesask commented 3 years ago

my-0 mx-0

Thanks man! Finally found proper fix!

jgthms / bulma