Change to Dark Nav Bar

[cahoskins]

I'm using 6.0 beta and working in the child theme. I want the nav bar to be dark all the time.

I was thinking I could do this with filters but I would love any alternative ideas. It's got to be one line of code somewhere.

The filters below might look very similar to the documentation...They are working -- the header/nav bar is dark, the buttons are light, but the text is dark. I'm just not sure how to change that part.

function header_bg_class() { return "sticky-top bg-secondary";}
add_filter('bootscore/class/header', 'header_bg_class', 10, 2);

function header_button_class() { return "btn btn-secondary btn-outline-light rounded-1";}
add_filter('bootscore/class/header/button', 'header_button_class', 10, 2);

I appreciate the help.

Cindy

[crftwrk]

Hi Cindy,

there are several ways to do this. Here are 2 ways:

1. Bootstrap color mode

Use Bootstrap color mode by adding data-bs-theme="dark" attribute to the <header> tag.

1. Copy header.php to your child and add attribute to header <header data-bs-theme="dark" .... Now navbar is dark and links white.
2. Then change dark color to secondary in _bootscore-variables.scss: $body-tertiary-bg-dark: #6c757d;
3. Use your filter to change button classes

2. Combination with filters and SCSS

1. Use your filters to change bg and button classes
2. Define nav, offcanvas-title and offcanvas bg in _bootscore-custom.scss:

#masthead .navbar {
  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
}

#offcanvas-navbar {
  color: var(--#{$prefix}light);
  background-color: var(--#{$prefix}secondary);
}

Both leads into the same result but I would prefer the second variant.

Solved?

[cahoskins]

Thank you, that helps a lot. For some reason though on the main page, one of the nav menu items is bolded as if it were selected. The main page isn't on the nav bar. Check it out here: https://6b5.042.myftpupload.com/

[crftwrk]

That's because Policies is linked to the frontpage and gets active class. Change this link to #.

[cahoskins]

Thank you so much Basti. You are the best.

[crftwrk]

You're welcome 👍. Please mark the answer as solved, thank you.

[cahoskins]

I'm happy to report that my prod site is updated to bs 6.0 and I'm no longer overriding any theme files or bs-swiper plugin files. Here is the production site: https://antgear.com

[crftwrk]

Great to hear!

FYI, there is a little issue using the same color for text and background in your mini-cart. Subtotal price is not visible: