Skip to content

Commit

Permalink
Merge pull request #409 from Automattic/libre-2-fix-header-weirdness-2
Browse files Browse the repository at this point in the history 
Libre 2: Add container to help make sure header pseudo element doesn't cause side scrolling.
  • Loading branch information
@laurelfulford
laurelfulford authored Dec 5, 2018
2 parents b4c12fc + b0079bd commit c08fb4c
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 66 deletions.
57 changes: 29 additions & 28 deletions libre-2/footer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,54 +9,55 @@

?>

</div><!-- #content -->
</div><!-- #content -->

<footer id="colophon" class="site-footer" role="contentinfo">
<?php if ( is_active_sidebar( 'sidebar-2' ) || is_active_sidebar( 'sidebar-3' ) || is_active_sidebar( 'sidebar-4' ) ) : ?>
<footer id="colophon" class="site-footer" role="contentinfo">
<?php if ( is_active_sidebar( 'sidebar-2' ) || is_active_sidebar( 'sidebar-3' ) || is_active_sidebar( 'sidebar-4' ) ) : ?>

<div class="footer-widgets clear">
<div class="footer-widgets clear">

<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>

<div class="widget-area">
<div class="widget-area">

<?php dynamic_sidebar( 'sidebar-2' ); ?>
<?php dynamic_sidebar( 'sidebar-2' ); ?>

</div><!-- .widget-area -->
</div><!-- .widget-area -->

<?php endif; ?>
<?php endif; ?>

<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>

<div class="widget-area">
<div class="widget-area">

<?php dynamic_sidebar( 'sidebar-3' ); ?>
<?php dynamic_sidebar( 'sidebar-3' ); ?>

</div><!-- .widget-area -->
</div><!-- .widget-area -->

<?php endif; ?>
<?php endif; ?>

<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>

<div class="widget-area">
<div class="widget-area">

<?php dynamic_sidebar( 'sidebar-4' ); ?>
<?php dynamic_sidebar( 'sidebar-4' ); ?>

</div><!-- .widget-area -->
</div><!-- .widget-area -->

<?php endif; ?>
<?php endif; ?>

</div><!-- .footer-widgets -->
</div><!-- .footer-widgets -->

<?php endif; ?>
<?php endif; ?>

<div class="site-info">
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'libre-2' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', 'libre-2' ), 'WordPress' ); ?></a>
<span class="sep"> | </span>
<?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'libre-2' ), 'Libre 2', '<a href="http://wordpress.com/themes/" rel="designer">Automattic</a>' ); ?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<div class="site-info">
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'libre-2' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', 'libre-2' ), 'WordPress' ); ?></a>
<span class="sep"> | </span>
<?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'libre-2' ), 'Libre 2', '<a href="http://wordpress.com/themes/" rel="designer">Automattic</a>' ); ?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
</div><!-- .site-wrapper -->

<?php wp_footer(); ?>

Expand Down
73 changes: 37 additions & 36 deletions libre-2/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,43 +18,44 @@
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'libre-2' ); ?></a>
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="" class="custom-header">
</a>
<?php endif; // End header image check. ?>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php if ( function_exists( 'the_custom_logo' ) ) : ?>
<?php the_custom_logo(); ?>
<?php endif; ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; ?></p>
<?php endif; ?>
</div><!-- .site-branding -->
<div class="site-wrapper">
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'libre-2' ); ?></a>
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="" class="custom-header">
</a>
<?php endif; // End header image check. ?>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php if ( function_exists( 'the_custom_logo' ) ) : ?>
<?php the_custom_logo(); ?>
<?php endif; ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; ?></p>
<?php endif; ?>
</div><!-- .site-branding -->

<div class="nav-wrapper">
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">&#9776; <?php esc_html_e( 'Menu', 'libre-2' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
<?php libre_2_social_menu(); ?>
</nav><!-- #site-navigation -->
<div class="nav-wrapper">
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">&#9776; <?php esc_html_e( 'Menu', 'libre-2' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
<?php libre_2_social_menu(); ?>
</nav><!-- #site-navigation -->

<?php // Add Woocommerce Cart to header if Woocommerce exists
if ( class_exists( 'WooCommerce' ) ) {
libre_2_woocommerce_header_cart();
}
?>
</div>
<?php // Add Woocommerce Cart to header if Woocommerce exists
if ( class_exists( 'WooCommerce' ) ) {
libre_2_woocommerce_header_cart();
}
?>
</div>

</header><!-- #masthead -->
</header><!-- #masthead -->

<div id="content" class="site-content">
<div id="content" class="site-content">
8 changes: 6 additions & 2 deletions libre-2/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,6 @@ big {
--------------------------------------------------------------*/
html {
box-sizing: border-box;
overflow-x: hidden;
}

*,
Expand All @@ -389,6 +388,10 @@ body {
word-wrap: break-word;
}

.site-wrapper {
overflow-x: hidden;
}

blockquote:before,
blockquote:after,
q:before,
Expand Down Expand Up @@ -614,7 +617,8 @@ textarea {
padding-top: 1.75em;
}

@media (min-width: 720px) {
/* Fakes out header background so it looks like it spans the whole browser window */
@media (min-width: 1120px) {
.singular .site-header:before,
.singular .site-header:after {
background: inherit;
Expand Down

0 comments on commit c08fb4c

Please sign in to comment.