Change x-navbar background color on child pages

[ollietigs]

Hi there,

I would like to change the background color of the x-navbar for child pages of a specific page.

In the past I have done a similar thing with the brand by using the following scripts. The first script is in the child theme in functions.php:

function is_parentchild( $pid ) {
global $post;

if ( is_page($pid) )
    return true;

$anc = get_post_ancestors( $post->ID );
foreach ( $anc as $ancestor ) {
    if( is_page() && $ancestor == $pid ) {
        return true;
    }
}

return false;
}

The second is placed in the child theme in: framework > views > global > _brand.php.

<?php echo ( is_front_page() ) ? '<h1 class="visually-hidden">' . $site_name . '</h1>' : ''; ?>`
<?php elseif (is_parentchild('220') ) : ?>
	<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
	  <img alt=" " src=" ">
	</a>
<?php else : ?>
	<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
	  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
	</a>
<?php endif; ?>

So I would like to do the same as I do with the brand but for the .x-navbar background color on the child pages of a specific page id. Please can you help?

[lely]

Hello @ollietigs,

We can change x-navbar background color using CSS. No need to edit template.
By default, a child page has this class on the body: page-child. Another class stating it’s parent is also added on the body like this: parent-pageid-409. 409 is the parent page ID. With that available class we can target it like this:

body.parent-pageid-409 .x-navbar {
    background-color: red;
}

Change 409 to the correcponding parent page ID and change red to your preferred color.

The following resources might help:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa