[Resolved] Different Header on Different Pages / Posts

[Brent Wilson]

I have added the custom taxonomy using Metabox. See this Loom video: https://www.loom.com/share/5471a7003c2e493ba15407d85249a3e3

[Fernando]

I see, since you’re using Metabox, the code provided wouldn’t work. Referring to this link, https://docs.metabox.io/fields/taxonomy/#:~:text=out%20taxonomy%20advanced.-,Template%20Usage,-Getting%20value%20of, you might need to alter the code to something like this:

add_filter('body_class','add_category_to_single');
  function add_category_to_single($classes) {
    if (is_singular()) {
      global $post;
		
      foreach((rwmb_meta( 'customtaxonomy')) as $category) {
        // add category slug to the $classes array
        $classes[] = $category->name;
      }
    }
    // return the $classes array
    return $classes;
  }

Try to replace customtaxonomy with the field_id of your custom taxonomy. However, as this is a third party plugin out of our scope, we can’t assure this will work. If this doesn’t work, may you kindly reach out to the support of Metabox plugin with regards to how to retrieve the custom taxonomies? Specifically, this code above:

foreach((rwmb_meta( 'customtaxonomy')) as $category) {
        // add category slug to the $classes array
        $classes[] = $category->name;
      }

Hope this helps! 🙂

[Brent Wilson]

Okay. Thank you for your help. I have reached out to Metabox support regarding this. Hopefully they can confirm how best to do this.

I wish there was a simple way to customize headers with an element since those can be easily targeted to specific custom taxonomies and such. Like even if an element could apply my CSS to specific taxonomies. Is there seriously no way to do that?

[Fernando]

I see. If you wish to add CSS page specific using Elements, you may try doing it through a Hook Element.

Kindly set the Hook to wp_head, and the Display Rules to your preference.

If you wish to alter the background color of you site navigation, here is a code you may try:

<style id="my-header-styler">
	nav#site-navigation {
		background-color: rgb(0,0,0);
	}
</style>

See: https://share.getcloudapp.com/NQuNzoEG

Hope this helps! Kindly let us know how it goes. 🙂

[Brent Wilson]

Okay, using a hook seems to be working great!

I am able to change the navigation-as-header background color, as well as the sticky background color. What CSS do I need to use to also change the dropdown mobile menu background color?

Also, what is the style id of my-header-styler doing in the style code you provided in your previous response? Is that just there as an explanation? Or is it actually doing something?

[Fernando]

What CSS do I need to use to also change the dropdown mobile menu background color?

Here is a CSS you may try:

.main-navigation.toggled .main-nav ul.menu {
    background-color: rgb(0,255,0);
}

Kindly replace the rgb value to your preference.

Also, what is the style id of my-header-styler doing in the style code you provided in your previous response? Is that just there as an explanation? Or is it actually doing something?

It’s not meant to do anything. I placed it there so I could easily locate it in the source code.

You can replace the code to something like this if you prefer:

<style>
	nav#site-navigation {
		background-color: rgb(255,255,255);
	}
	
	.main-navigation.toggled .main-nav ul.menu {
    background-color: rgb(0,255,0);
	}
</style>

Hope this clarifies! 🙂

[Brent Wilson]

Great! Thanks!

[Fernando]

You’re welcome Brent! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

[Brent Wilson]

Okay, a follow-up question on this site (https://wordpress-483838-2431328.cloudwaysapps.com/). I have background color change on mobile drop-down menus. But what about on the desktop dropdown menus when there are sub-pages?

See this screenshot: https://pasteboard.co/eGsuDVJ485hq.png

[Fernando]

Hi Brent,

Here is a CSS code you may try:

ul.menu li.menu-item ul.sub-menu {
    background-color: rgb(0,190,190);
}

Kindly modify rgb(0,190,190) to your preferred color value: https://htmlcolorcodes.com/color-picker/

Hope this helps. 🙂

[Brent Wilson]

Thanks! That worked!

[Fernando]

Glad that worked! You’re welcome Brent!

[Author]

Posts