has-navbar-fixed-top doesn't add enough padding for spaced navbars #3923
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
and others
{{ message }}
and others
This is about Bulma.
It's most likely a bug
Overview of the problem
This is about the Bulma CSS framework
I'm using Bulma version v1.0.2
My browser is: Chrome 130.0.6723.70 (64-Bit)
Description
When using a fixed
navbaras described in the docs by addingclass="has-navbar-fixed-top"to thehtmlDOM element andclass="navbar is-fixed-top"to thenav element, the nav is fixed andhtmlgets a top padding likeIn addition to the steps described above, I've also added
is-spacedto the navbar in order to give it some padding.So, in total, this is my root nav DOM element:
Now the problem is, that the spacing added by
<html class="has-navbar-fixed-top">does in fact add a padding, BUT it does NOT accout for the additional space taken by the navbar because ofis-spaced.This results in the problem, that content after the navbar is slightly too high and overflows behind the navbar.
This isn't a big deal because this can be easily fixed with some custom css, however it would be nice to get this fixed in a future release 😃
Steps to Reproduce
Add a fixed navbar with additional class
is-spaced.Expected behavior
html.has-navbar-fixed-topshould not just add a padding ofvar(--bulma-navbar-height), but should instead increase that value if the navbar is set tois-spaced.Actual behavior
html.has-navbar-fixed-topdoesn't add enough padding for the<html>element and content therefore starts behind the navbar.Potential Fix
This would work in theory, but it doesn't because
--bulma-navbar-padding-horizontalis defined within.navbar, and not for:root.So this is just the first idea I came up with. Thought it might help :)
The text was updated successfully, but these errors were encountered: