Libre 2: Add container to help make sure header pseudo element doesn't cause side-scrolling.
This commit is contained in:
Laurel Fulford
parent
b4c12fc05a
commit
b0079bdc7a
3 changed files with 72 additions and 66 deletions
|
|
@ -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(); ?>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">☰ <?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">☰ <?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">
|
||||
|
|
|
|||
|
|
@ -375,7 +375,6 @@ big {
|
|||
--------------------------------------------------------------*/
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
@ -389,6 +388,10 @@ body {
|
|||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.site-wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue