MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Setting up Laurel's Logo & Header Options

Please note: This article is specifically for the Laurel theme



Laurel has a number of ways to customize your header area in regards to a logo image and how it's displayed. Below, we'll go through the various options which include having your logo image display in the top-bar, having your logo image display above the top-bar, and creating a text logo.


ADDING A LOGO IMAGE TO LAUREL'S DEFAULT HEADER




By default, Laurel's logo image will display on the left of its top-bar. To add a logo image, you can navigate to WP Dashboard > Appearance > Customize > Header & Logo Settings > Upload Logo > and upload your preferred logo image here. 

Your logo image will automatically override Laurel's demo logo image. 

Laurel's top-bar element is 94px tall.
You can use this as a guide when creating your preferred logo image. 

That being said, you can also adjust the maximum width of the logo image you upload within the section titled "Logo Max Width in %".  If you logo image is appearing too large, you can reduce the percentage value down until you find a sizing you prefer. 





LAUREL'S HEADER OPTION #2 - MOVE YOUR LOGO BELOW THE MENU


Having your logo image in the top-bar can be limiting in regards to your logo image's size. Because of this, we've added a secondary header option which allows you to move your logo image below the top-bar. 




To enable the secondary header option, navigate to WP Dashboard > Appearance > Customize > Header & Logo Settings > and check the box for the option titled "Use Secondary Header Layout". 

Your logo image will automatically display at 100% of it's original width. 

You can then use the options titled "Secondary Header Logo Padding Top" and "Secondary Header Logo Padding Bottom" to adjust the spacing above and below your logo image. The units of measurement are pixels. Change the default "0" number values to whatever you like; play around with the padding until you find the spacing you like the best. 





USING A TEXT LOGO

To have your logo be a bit of text instead of an actual image, you can use Laurel's "Text Logo" option. This option works for both the default header where the logo is in the top-bar and also for the secondary header layout where the logo is below the top-bar. It uses the Google Font called "Karla". 

First, navigate to WP Dashboard > Appearance > Customize > Site Identity. Here, you can enter your preferred logo text in the form titled "Site Title". 

Next, navigate to WP Dashboard > Appearance > Customize > Header & Logo Settings
Check the box for the option titled "Use Text Logo". 

Your logo will automatically display the title you entered within "Site Identity".

To adjust your text logo's font-size, you can change the number value within the form titled "Text Logo Size (px)". 

To make your text logo more bold, you can select the "Bold" option within the section titled "Text Logo Font Weight". 

And, to change your text logo's color, you can use the color picker form titled "Text Logo Color".