MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Moving the top bar below the logo image in Rosemary

Please note: This FAQ Article is specifically for the Rosemary 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!





Navigate to WP Dashboard > Appearance > Editor > and 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('solopine_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 esc_url(get_theme_mod('solopine_logo')); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>
                    <?php else : ?>
                        <h2><a href="<?php echo home_url(); ?>"><img src="<?php echo esc_url(get_theme_mod('solopine_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 20 (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: 70px;}
.single #header, .page #header {margin-bottom: 0;}

Now you're all set!