MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Moving the top bar below the logo image in Florence

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



The top bar includes your navigation menu, your social network icons, and your search bar.
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. First, though, one important thing to note is that moving the top bar below your logo image will remove the top bar's "sticky" feature, meaning that the top bar will no longer scroll down the page with the user. It will remain at the top of the page. If this is OK with you, let's get started!




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 70 - 98, 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 them onto the blank Line 26 (right above where it says div id="top-bar" ).




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:

#top-bar {position: relative; margin-bottom: 50px;}

Now you're all set!