Header Image

Hi there,

I’m glad you were able to get this resolved! The behaviour you mentioned should be the default for Harmonic.

If you have any trouble with how the header looks across different devices, please feel free to reply back with a link to your site and I’ll take another look. (http://www.omnikid.com is currently leading to a site that doesn’t have Harmonic active on it.)

I’m currently being directed to a blank black page when visiting http://www.omnikid.eu and am therefore not able to see the behaviour you described in action. I have also not been able to replicate it on the theme’s demo site or my own test site. Can you please provide a direct link to a page where I can see and look into the behaviour?

Thank you for sharing the link to your site!

The individual portfolio pages on your site do take a little longer to load than other pages, which causes the white flash. The longer loading time may be due to a number of factors, including the relatively large number of images on some of the pages.

If you have Jetpack installed then you can enable its free image accelerations service, Photon, to get the images to load faster.

Caching plugins, such as W3 Total Cache, will also help with overall page speed.

When you there, would you be so nice to tell me how to change the color of the toggle menue button in mobile view.:)

This can be changed with some custom CSS.

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

#mobile-link {
    background: #663399;
}

You can change the value of #663399 to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:

http://www.color-hex.com/

Let me know how you get on with that or if any extra questions come up.

Hi there,

In addition to the code that Kathryn guides you to copy after line 30 in header.php, you’ll also need to remove the original code for the social menu at line 41 in the file:

<?php
if ( has_nav_menu( 'social' ) ) : ?>
	<div id="social-links-wrapper">
		<?php wp_nav_menu( array(
			'theme_location'  => 'social',
			'container_class' => 'social-links',
			'menu_class'      => 'clear',
			'link_before'     => '<span class="screen-reader-text">',
			'link_after'      => '</span>',
		) ); ?>
	</div>
<?php endif; ?>

Hope that helps!

Hi @geomanbeats,

I made a mistake in my last reply to you. Sorry about that!

To start with, please undo the change that I asked you to make and re-add the code for the social menu underneath the following:

<div id="site-branding">
	<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

The second snippet of code for the social menu needs to be placed inside the mobile panel. I believe you may have previously added it just after, instead of before, the following closing div at line 30:

</div><!-- #mobile-panel -->

The second snippet needs to be placed before that closing div in order to only appear on the mobile version of the theme.

Apologies again for the confusion my first reply may have caused, please do let me know how you get on with the above steps.

I’m glad to hear that! We’re right here if extra questions come up too.

href=”http://184.154.188.35/~logotest/ya/gnar/wp-admin”>

My site is not live. I have been unsuccessful with the people I hired over a year ago 🙁 I THINK I attached a link for you to view above.