CSS/Bulma: How can I get my content to align with my navbar brand?

user_3574603 0
Viewed 2218

I'm building a page with Bulma.

I want the left edge of my content to align with the left edge of the brand in my navbar.

At the moment, when the page is fullwidth, the content is positioned a little to the right of the navbar brand and when the page width is mobile size, the content is flush with the edge of the screen.

Like so: Full width Mobile width

I see that .columns adds padding when at full width but this disappears when at mobile width. I probably want that to be the other way around?

How can I fix my HTML so that the navbar and content align perfectly at all times? I don't want the content to stick to the left edge of the screen when the viewport is at mobile width. What's the best way to do it using Bulma?

<!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
  </head>
  <body>

  <!-- Navbar -->
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <strong>brand</strong>
        </a>

        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div class="navbar-menu">
        <div class="navbar-end">
          <a class="navbar-item">Home</a>
          <a class="navbar-item">About</a>
        </div>
      </div>
    </div>
  </nav>

  <main class="container content">
    <div class="columns">
      <div class="column">
        <h1 class="title">
          Hello World
        </h1>
        <p class="subtitle">
          My first website with <strong>Bulma</strong>!
        </p>
      </div>
    </div>
  </main>
  </body>
</html>
bulma css html
1 Answers

If you need to fine tune the layout, I would not use Bulma if I were you; I'd write the CSS from scratch.

This library has made lots of strange decisions, like negative margins all over the place, that may make it tricky to diagnose what's going on, especially if you're new to CSS.

It's also based on Flexbox, which will render in absolutely bizarre ways on browsers that don't support flexbox, like IE9--which 1.5 out of 1000 people use, mostly professors and grandparents [support, usage stats].

If you want to use Bulma, you can make your content left-aligned at full screen width by including CSS with the following lines after your Bulma CSS [fiddle]:

/**
* Navbar
**/

a.navbar-item {
  padding: 0;
}

.navbar > .container div.navbar-brand {
  margin-left: 0;
}

/**
* Body
**/

.container .columns {
  margin-left: 0;
}

.columns .column {
  padding-left: 0;
}


/**
* Navbar
**/

a.navbar-item {
  padding: 0;
}

.navbar > .container div.navbar-brand {
  margin-left: 0;
}

/**
* Body
**/

.container .columns {
  margin-left: 0;
}

.columns .column {
  padding-left: 0;
}
<!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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
  </head>
  <body>

  <!-- Navbar -->
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <strong>brand</strong>
        </a>

        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div class="navbar-menu">
        <div class="navbar-end">
          <a class="navbar-item">Home</a>
          <a class="navbar-item">About</a>
        </div>
      </div>
    </div>
  </nav>

  <main class="container content">
    <div class="columns">
      <div class="column">
        <h1 class="title">
          Hello World
        </h1>
        <p class="subtitle">
          My first website with <strong>Bulma</strong>!
        </p>
      </div>
    </div>
  </main>
  </body>
</html>

user_17273920
Related