WordPress.org

Support

Support » Themes and Templates » How to Divide a Header into 2 Columns?

How to Divide a Header into 2 Columns?

  • I’m working on a site in which the logo is basically square. I’d like to divide the header into two (uneven) columns so I can keep the logo over the sidebar, but reduce/eliminate the empty space between the nav bar and the main content section below.

    The site is in maintenance mode, but here’s a screenshot so you can see the problem:

    Party Darling Screenshot

    I can’t seem to hit on the right code, or the right placement, to make it work. I’m using the Mystile theme. The relevant code (I hope!) is below.

    Thanks for any help you can offer!

    </div><!-- /#top -->
    
        <?php woo_header_before(); ?>
    
    	<header id="header" class="col-full">
    
    	    <hgroup>
    
    	    	 <?php
    			    $logo = esc_url( get_template_directory_uri() . '/images/logo.png' );
    				if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' ) { $logo = $woo_options['woo_logo']; }
    				if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' && is_ssl() ) { $logo = preg_replace("/^http:/", "https:", $woo_options['woo_logo']); }
    			?>
    			<?php if ( ! isset( $woo_options['woo_texttitle'] ) || $woo_options['woo_texttitle'] != 'true' ) { ?>
    			    <a id="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( get_bloginfo( 'description' ) ); ?>">
    			    	<img src="<?php echo $logo; ?>" alt="<?php esc_attr( get_bloginfo( 'name' ) ); ?>" />
    			    </a>
    		    <?php } ?>
    
    			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    			<h3 class="nav-toggle"><a href="#navigation">☰ <span><?php _e('Navigation', 'woothemes'); ?></span></a></h3>
    
    		</hgroup>
    
            <?php woo_nav_before(); ?>
    
    		<nav id="navigation" class="col-full" role="navigation">
    
    			<?php
    			if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
    				wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fr', 'theme_location' => 'primary-menu' ) );
    			} else {
    			?>
    	        <ul id="main-nav" class="nav fl">
    				<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
    				<li class="<?php echo $highlight; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>
    				<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
    			</ul><!-- /#nav -->
    	        <?php } ?>
    
    		</nav><!-- /#navigation -->
    
    		<?php woo_nav_after(); ?>
    
    	</header><!-- /#header -->
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to Divide a Header into 2 Columns?’ is closed to new replies.
Skip to toolbar