MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Moving the top bar below the logo image in Redwood

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



The top bar includes your navigation menu, your social network icons, and your search icon.
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!




In order to make the adjustment, we will need to alter some theme files. While you can typically access your theme files via Appearance > Editor, we recommend installing the code editor plugin called WPide.
The WPide plugin includes line numbers which will make the below instructions much easier to follow.

Open up the theme file "header.php".
Between Lines 69 - 97, you'll see a big block of code beginning with header id="header" and ending with /header.
This block of code looks like:


We'll be moving this block of code within the document a bit. 

Copy this big block of "header" code and paste it onto the blank Line 24 (right above where it says div id="top-bar" ).



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

Lastly, within Appearance > Customize > Custom CSS, copy & paste the following:


#top-bar {position: relative; margin-bottom: 40px;}
#header, #header.noslider {margin-bottom: 0;}


Now you're all set to go!