Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add logo to Twenty Seventeen Menu
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php
if(has_custom_logo()) {
the_custom_logo();
}
?>
<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
<?php
// If a regular post or page, and not the front page, show the featured image.
if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :
echo '<div class="single-featured-image-header">';
the_post_thumbnail( 'twentyseventeen-featured-image' );
echo '</div><!-- .single-featured-image-header -->';
endif;
?>
<div class="site-content-contain">
<div id="content" class="site-content">
.navigation-top .custom-logo-link {
display:none;
float:left;
}
.site-branding .custom-logo-link {
display:none;
}
.site-navigation-fixed .custom-logo-link {
display:block;
}
.navigation-top #site-navigation {
clear:none;
float:left;
}
@leoleylan
Copy link

leoleylan commented Aug 24, 2017

This looks like something I am trying to implement. Just doesn't seem to work well. I want to display the logo as soon as the sticky nav/menu starts. Is this what you intended?

@havelmond
Copy link

havelmond commented Nov 11, 2017

It works well for me. I had to tweak the css though:

.navigation-top .custom-logo-link {
 display:none;
 float:left;
}
/*.site-branding .custom-logo-link {
 display:none;
}*/
.site-navigation-fixed .custom-logo-link {
display:block;
}

/*make the logo in the navigation smaller*/
.site-navigation-fixed .custom-logo {
width: 10rem;
}

/*.site-navigation-fixed instead of .navigation-top*/
.site-navigation-fixed #site-navigation{
 clear:none;
 float:left;
}

@Golok
Copy link

Golok commented Sep 19, 2018

Thanks zillions, you saved me hours of work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment