How
hero? <section class="hero is-fullheight-with-navbar">
<div class="hero-body">
<div class="columns is-centered">
<form class="column is-narrow">
<!-- should be centered -->
</div>
</div>
</section>
What is the best way to bring the validation message to the next line as in the first field? The
has-addons class and the mm button destroy the alignment so the help message is always tied to the same line...
I don't know if there is a more active Bulma chat but I'm looking to nest dropdowns in the navbar and I'm having a hard time due to a block of css:
.navbar-item.is-active .navbar-dropdown,
.navbar-item.is-hoverable:focus .navbar-dropdown,
.navbar-item.is-hoverable:focus-within .navbar-dropdown,
.navbar-item.is-hoverable:hover .navbar-dropdown {
display: block;
}This results in all child dropdowns to become active when the parent is active. The bothersome thing is, all that needs to be added is a > prior to each .navbar-dropdown which seems to function fine. I'm not sure how to work around it without modifying the base code.
> should be considered and also for the active styling but what I have works at least in desktop view. Will probably need additional code to make it work on mobile.@include desktop {
.navbar-item.is-active > .navbar-dropdown .navbar-dropdown .navbar-item,
.navbar-item.is-hoverable:focus > .navbar-dropdown .navbar-item,
.navbar-item.is-hoverable:focus-within > .navbar-dropdown .navbar-item ,
.navbar-item.is-hoverable:hover > .navbar-dropdown .navbar-item {
> .navbar-dropdown {
display: none;
}
&.is-active > .navbar-dropdown,
&.is-hoverable:focus > .navbar-dropdown,
&.is-hoverable:focus-within > .navbar-dropdown,
&.is-hoverable:hover > .navbar-dropdown {
display: block;
}
}
}
Can I add Bulma tags to children of a menu-list item in a way that keeps them in the same row as the menu item? I.e.:
<ul class="menu-list">
<li>
<a>Posts</a> <!-- doesn't seem to like siblings sitting on the same line -->
<span class="tag is-info">123</span>
</li>
<li><a>Members</a></li>
<li><a>Authentication</a></li>
</ul>I want to use tags to display the number of items in a given category pointed to by the menu link.
Hey Guy's I am struggling with the <figure image setup, I have a ratio on the image set like
<figure class="image is-square">
<img src="{{asset('/storage/products/images/'.$product->images->first()->image_thumb )}}" alt="{{ $product->name }}">
</figure>and that is working but I need to scale down the image to 250x250 I tried setting up the css like:
```
wrong button
.card-image figure img {
height: 250px !important;
width: 250px !important;
}but the height and width of the figure is still computer to 428
should be something like
.navbar-item:hover {
background-color: #ccc;
}either comment that out, or (bad idea) overwrite it with !important
I got a question, Im trying to add several themes to the page with a body class selector, and I got the following scss file:
@import "_variables.scss";
@mixin mybody($themename, $values) {
$primary: map-get($values, primary);
.#{$themename} {
@import 'bulma/bulma';
}
}
@each $name, $values in $themes {
@include mybody($name, $values);
}Is there any way to achieve this overwrite of $primary variable with the @use directive or @import in any way?
This code generates an error at the @import statement because its not a good place to have it :(