Bulma: Cannot change Navbar Height with internal css style.

[pdt590]

This is about Bulma | the Docs.

Overview of the problem

I try to change Navbar height by using css code. However, it does not work.

Description

Cannot change Navbar Height with internal css style.

Steps to Reproduce

1. HTML code

<nav class="navbar" 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" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </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>
</nav>

1. CSS code

nav.navbar {
     height: 2rem !important;
}

Expected behavior

It is possible to change Navbar Height with internal css style.

Actual behavior

Cannot change Navbar Height with internal css style.

[jgthms]

Do you have a Codepen?

[pdt590]

@jgthms : Thank you for your reply.
This is my pen Link
I saw that navbar height still is 3.25rem when i set it to 2rem;

[fexell]

Had a quick view at it. Seems like Bulma uses "min-height" to set the height. And since the min-height is 3.25rem, you cannot go below 3.25rem. You have to unset the min-height, as in min-height: unset; for .navbar.

Is min-height the default way Bulma sets heights? Was kind of excited to try Bulma out, but it doesn't make sense to set default min-height to anything as a framework. Oh, well.

[jgthms]

It’s to allow the navbar to expand in height if its content needs to.

[mitchpowell]

Thank you for the 'unset' tip. I'd been experiencing this as well. I'm still at a beginner's level so I don't have a Codepen account yet, and I'm struggling with getting my navbar to do what I want it to do on mobile, and also on desktop.

I watched this YouTube video to get the javascript for the burger, but I don't know the javascript to make the right-arrow indicator, and minimal dropdown styling.

https://youtu.be/I6nuWeylMYM

Looks like I need to get a Codepen account and learn to use it. :D
Can you look at where I'm trying to index my Learning Labs on my own domain, and help me get the proper javascript to make it work the way it ought to?

http://mitchpowell.com/learninglabs

Thank you.
I hope to get familiar with GitHub as well as Codepan.

[twig1gy]

I successfully changed my navbar height using a bulma variable:
https://bulma.io/documentation/components/navbar/#navbar-helper-classes
Specifically, I needed the nav to increase based on a larger logo image so I used this one:
$navbar-item-img-max-height
I'd recommend using those variables/classes so that any calcs done using those values work properly.

[hargange]

I successfully changed my navbar height by adding is-spaced class to navbar without using any bulma variable, since I had to increase it a little bit.