thejordany

Yeah adding that ^ z-index to screens smaller than 768px fixed it.

Thank you!

Thanks! That seems to have done the trick.

I had to remove this though or the header image disappeared at less than 767px in width. ¯\_(ツ)_/¯

.custom-header .social-navigation, 
.custom-header-media,
.site-header,
.site-content-contain {
    position: relative;
}

OK. I’ve got it there by putting it in the header-image.php located in the template-parts, just above the header-media.

<div class="custom-header">

	<?php if ( has_nav_menu( 'social' ) ) : ?>
					<nav class="social-navigation social-header" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
						<?php
							wp_nav_menu( array(
								'theme_location' => 'social',
								'menu_class'     => 'social-links-menu',
								'depth'          => 1,
								'link_before'    => '<span class="screen-reader-text">',
								'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
							) );
						?>
					</nav><!-- .social-navigation -->
		<?php endif; ?><!-- social links menu -->

		<div class="custom-header-media">

I am still getting the same issue. Everything works fine on the front page, but the links don’t work on the other pages, even when you change to float:none.

• This reply was modified 8 years, 4 months ago by thejordany.

http://iqua.ie/beta/

This is the site I am working on. On the front page the social links menu in the header works fine. When you go to another page and the header changes, the social links menu shows up, but it does not work as a link. Currently trying to work out why this is happening and how to fix it.

The social links work fine on mobile on the non-front pages, however it displays on a white background, pushing the header media down, which is not ideal.

• This reply was modified 8 years, 4 months ago by thejordany.

OK I seem to have gotten it to the right place. This may not have been the best way to do it, but it’s there.
Using a child theme, I stuck the PHP from the footer.php social links menu into the header.php just above the header image.

<header id="masthead" class="site-header" role="banner">
		<?php

				if ( has_nav_menu( 'social' ) ) : ?>
					<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
						<?php
							wp_nav_menu( array(
								'theme_location' => 'social',
								'menu_class'     => 'social-links-menu',
								'depth'          => 1,
								'link_before'    => '<span class="screen-reader-text">',
								'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
							) );
						?>
					</nav><!-- .social-navigation -->
				<?php endif;
				?> <!-- social links menu -->

		<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

Now I just need to play with the CSS.