MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Moving the top bar below the logo image in Hemlock

Please note: This FAQ Article is specifically for the Hemlock theme.



The top bar includes your navigation menu, your social network icons, and your search function.
By default, it sits above your header's logo image. If you'd instead like to move your top bar to sit below your logo image, you can follow the steps below. 

Please note! The first section of this article will go over shifting the top-bar beneath the logo image. After doing this, the top-bar will no longer be "sticky", meaning that it won't stick to the top of the browser screen as the visitor scrolls down the page. If that's ok with you, you only need to accomplish the first section of these instructions. 

However, if you'd like to move the top-bar beneath the logo image AND keep the top-bar sticky when scrolling, this is also possible to do! There are just more steps involved. To move the top-bar and have it remain sticky, you'll want to complete both the first section of the steps below AND the second section of steps. Let's get started!




MOVE THE TOP-BAR BELOW THE LOGO IMAGE

Note: We recommend installing the code editor plugin called WPide when adjusting your theme's files. While accessing your theme files from within Appearance > Editor may be easy, the WPide plugin includes lovely line numbers which will make the below instructions much easier to follow!

Open up the theme's "header.php" file.
Between Lines 66 - 94, you'll see a big block of code beginning with header id="header" and
ending with /header.

This block of code looks like:

    <header id="header">
        
        <div class="container">
            
            <div id="logo">
                
                <?php if(!get_theme_mod('sp_logo')) : ?>
                    
                    <?php if(is_front_page()) : ?>
                        <h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>
                    <?php else : ?>
                        <h2><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h2>
                    <?php endif; ?>
                    
                <?php else : ?>
                    
                    <?php if(is_front_page()) : ?>
                        <h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_theme_mod('sp_logo'); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>
                    <?php else : ?>
                        <h2><a href="<?php echo home_url(); ?>"><img src="<?php echo get_theme_mod('sp_logo'); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h2>
                    <?php endif; ?>
                    
                <?php endif; ?>
                
            </div>
            
        </div>
    
    </header>


Copy this block of code and paste it onto the blank Line 26 (right above where it says nav id="navigation" ).





Be sure to go back down and remove that original block of header code below, otherwise you'll have two logo images appearing. Save the file when you're finished.

Then, within Appearance > Customize > Custom CSS, add the following:

#navigation {position: relative; margin-bottom: 70px;}
#header {margin-bottom: 0; padding-top: 0;}
.featured-area {margin-top: 70px;}




MAKE THE TOP-BAR STICKY AGAIN

So now your top-bar is below your logo image but it no longer "sticks" to the top of the screen when you scroll down the page. If you'd like to make it sticky once again, we'll need to install and implement a plugin that is not on the WordPress Plugin Directory. 

Download the necessary jQuery plugin from its website: http://stickyjs.com/

You don’t need to unzip the plugin package that you download. Within the plugin’s package, find the folder titled “jquery.sticky”. Copy everything within this file.

Within your WordPress, install the code editor plugin called "WPide" if ( http://wordpress.org/plugins/wpide ). This will let us access and edit the necessary theme files.  

Navigate to WP Dashboard > WPide > themes > hemlock > and open the "js" folder. 

Click the little "add new file" icon (it looks like a little white piece of paper with a green " + " plus-sign over it) and create a new file within the theme’s “js” folder. Title this file “jquery.sticky.js”. Paste the code you copied from the plugin's file into this new file and save.

Next, navigate to Hemlock's “functions.php” file. Scroll down to the section titled “Register & enqueue styles/scripts”. Add a new line among the others for this plugin and insert this line of code:

wp_register_script('jquery.sticky', get_template_directory_uri() . '/js/jquery.sticky.js', 'jquery', '', true);



Further down, we’ll also need to enqueue the script. 

Add the following code to your list of enqueued scripts:

wp_enqueue_script('jquery.sticky');



Save changes to this file.

Lastly, navigate to the “solopine.js” file, which is within Hemlock's "js" folder. 

Copy and paste the following bit of code onto blank Line 4. This is the blank Line beneath the “use strict”; line of code at the top of the document.

// Sticky Menu 
var $wpAdminBar = $('#wpadminbar'); 
if ($wpAdminBar.length) { 
$("#navigation").sticky({topSpacing:$wpAdminBar.height()}); 
} else { 
$("#navigation").sticky({topSpacing:0}); 
}




Save changes when finished.

If it doesn’t function right away or if your site goes white below the top-bar, you will want to clear any cache tools you have operating on your WordPress and/or your web browser. 

You're all set now!