YOAST breadcrumbs styling and position in header

In a staging wp site I am trying to properly implement YOAST breadcrumbs sitewide.
Twenty-twenty child theme. Twentig transparent header with sticky menu activated.

I am struggling with two things:
– Breadcrumbs position and responsive behaviour
– Breadcrumbs color.
I have inserted the breadcrumbs within the template-parts/header/site-nav.php of my twenty-twenty child theme file as follows:

/**
 * Displays the site navigation.
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

?>

<?php if ( has_nav_menu( 'primary' ) ) : ?>
	<nav id="site-navigation" class="primary-navigation" aria-label="<?php esc_attr_e( 'Primary menu', 'twentytwentyone' ); ?>">
		<div class="menu-button-container">
			<button id="primary-mobile-menu" class="button" aria-controls="primary-menu-list" aria-expanded="false">
				<span class="dropdown-icon open"><?php esc_html_e( 'Menu', 'twentytwentyone' ); ?>
					<?php echo twenty_twenty_one_get_icon_svg( 'ui', 'menu' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
				</span>
				<span class="dropdown-icon close"><?php esc_html_e( 'Close', 'twentytwentyone' ); ?>
					<?php echo twenty_twenty_one_get_icon_svg( 'ui', 'close' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
				</span>
			</button><!-- #primary-mobile-menu -->
		</div><!-- .menu-button-container -->
		<?php
		wp_nav_menu(
			array(
				'theme_location'  => 'primary',
				'menu_class'      => 'menu-wrapper',
				'container_class' => 'primary-menu-container',
				'items_wrap'      => '<ul id="primary-menu-list" class="%2$s">%3$s</ul>',
				'fallback_cb'     => false,
			)
		);
		?>
	</nav><!-- #site-navigation -->
		
<?php endif; ?>
	<?php

if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

The first problem is that when in tablet or mobile view the breadcrumbs are displayed right next to the logo and not under the mobile menu icon. I would like to always display the breadcrumbs under the logo and under the menu buttons.

The second problem is I am not able to change the color of the breadcrumbs exactly as the menu items: light colored (white in my case) on top of the transparent header and dark (black in my case) when the sticky header is activated.

A secondary styling improvement would be to make the breadcrumb size a little smaller for mobile view.
Thank you for your time and advice.

• This topic was modified 2 years, 5 months ago by gorfeas.

The page I need help with: [log in to see the link]