bulma icon indicating copy to clipboard operation
bulma copied to clipboard

Published 20 hours ago • verified publisher icon jgthms

Navbar height should be 3.5rem by default

Open cyrilsuzat opened this issue 1 year ago • 1 comments

Problem

The variable $navbar-height is set to 3.25rem (52px) by default. However the navbar height changes to 3.5rem (56px) as soon as a button is added!

➡️ This poses a 4px problem in the case of a fixed navbar because the padding is calculated as follows :

$navbar-height: 3.25rem !default

html,
body
  &.has-navbar-fixed-top
    padding-top: $navbar-height
  &.has-navbar-fixed-bottom
    padding-bottom: $navbar-height

Steps to reproduce :

  • Create a fixed navbar
  • Add buttons
<body class="has-navbar-fixed-top">
  <nav class="navbar is-fixed-top has-background-light">

    <!-- Navbar height is 52px by default -->
    <a class="navbar-item">Link</a>

    <!-- Navbar height is 56px when inserting buttons -->
    <div class="navbar-item">
      <a class="button">Button</a>
    </div>

  </nav>
</body>

Proposed solution

Change default navbar height from 3.25rem to 3.5rem.

// sass/components/navbar.sass:6
$navbar-height: 3.5rem !default

cyrilsuzat avatar Jun 16 '23 08:06 cyrilsuzat

I have fixed the issue and submitted my PR for review. Hopefully they merge it soon

AadiRana911 avatar Jun 21 '23 09:06 AadiRana911