CODEWITHSUNDEEP
colorscustomizationhelperbulma
Ralph Frost
Ralph Frost

Reputation: 81

Bulma - how to change text color of all links on navbar using one helper?

In Bulma, how does one change text color for multiple items at once?

That is, being low-vision, I want to change all text on a navbar to be black rather than the fainter gray.

I'm new to Bulma and so far see I can use "has-text-black" helper but have to add them to every link.

<nav id="navbarMain" class="navbar is-spaced" role="navigation" aria-label="main navigation">
    <div class="container">
        <div class="navbar-brand">
                <a class="navbar-item is-size-4 has-text-black" href="/">
                    <span class="icon is-large is-circle">
                        <i class="fas fa-cube has-text-primary fa-lg"></i>
                    </span>&nbsp;
                    My Site
                </a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
  <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div id="navbarMenu" class="navbar-menu">
            <div class="navbar-start">
                 <a class="navbar-item has-text-black" href="/about/">
                            <span class="icon has-text-link">
                                <i class="fas fa-info-circle"></i>
                            </span>&nbsp;
                        About
                    </a>

....

I was hoping to add the helper just in one place in the class on one div or container containing the navbar link items but that doesn't seem to work.

I looked in the customization docs and tried setting $text: black; but that didn't work either.

Is there a way to set all the grayish text color in a section or container to black?

And, how does one set/customize the global or site-wide text color from grayish to black (or something else?

(Otherwise, is there detailed directions for all the color variables and how to revise them in the correct order?)

Thanks in advance. Ralph

Upvotes: 1

Views: 3640

Answers (2)

mxn
mxn

Reputation: 121

An easy way would be to modify it through your custom css file after importing the bulma css. For smaller projects that might be an acceptable solution:

.navbar-item {
  color: red;
}

This would change all you navbar-items red by default. Be aware of probably emptying your cache before testing it

Upvotes: 0

Shivang Chaturvedi
Shivang Chaturvedi

Reputation: 119

The key is to pay attention to documentation. Bulma provides SASS variables for all its components or elements to play around with for making your own customization. The objective is to write the custom CSS AS LESS AS POSSIBLE. Here's the link

https://bulma.io/documentation/components/navbar/#colors

In your project's global SCSS file, you can add these SCSS variables and add the colors of your choice:

$navbar-burger-color: #f1f1f1;
$navbar-background-color: #273643;
$navbar-item-hover-background-color: #3f4f62;
$navbar-item-hover-color: $white;
$navbar-item-color: #f1f1f1;
$navbar-dropdown-arrow: #f1f1f1;
$navbar-tab-active-color: #f1f1f1;
$navbar-tab-active-background-color: #273643;
$navbar-dropdown-background-color: $primary;

If you are confused over the color combination, visit--> https://coolors.co

Cheers!! :)

Upvotes: 3

Related Questions