social links menu in header

Would you be able to get the social icons in there first? Then we can give CSS recommendations.

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.

I added another class to differentiate it from the footer social links menu, and got it to show up using this.

.social-navigation.social-header {
	position: relative;
	z-index: 1;
}

However, the hovering and links only work on the front page of the site, and I still need to get it into a good position, on desktop and mobile.

Could you emulate the CSS problems you face through a sandbox took like cssdesk.com ?

https://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 7 years ago by thejordany.

I think your social links are in the wrong HTML element, which is causing the z-index problem (that I don’t think is fixable).

Can you move the social links inside this element:

<div class="custom-header

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 6 years, 12 months ago by thejordany.

Now you can resolve it with CSS z-index:

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

.custom-header-media {
    z-index: 1;
}

.custom-header .social-navigation {
    z-index: 2;
}

.custom-header-media {
    z-index: 1;
}

That got the links to work, but that^ covers the entire front page with the header media, so you can’t see the content.

Try this:

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

.custom-header-media {
    z-index: 1;
}

.custom-header .social-navigation {
    z-index: 4;
}

.site-content-contain {
    z-index: 2;
}

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;
}

Noticing that this has presented a new issue. The main navigation no longer works or is visible on the front page when the screen is less than 768px in width. Any ideas why? I am going to play around a bit.

Thanks!

Added the following to fix

.navigation-top {
	z-index: 3;
}

• This reply was modified 6 years, 12 months ago by thejordany.

I cannot replicate this problem now, have you resolved it already?

• This reply was modified 6 years, 12 months ago by Andrew Nevins.

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

Thank you!

Great, if you have another problem I recommend posting a new thread here: https://www.ads-software.com/support/theme/twentyseventeen/#new-post

Otherwise I don’t think people are going to see the issue.