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