MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Make Rosemary's logo area full-width

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


By default, Rosemary's logo image is centered within a container that is 1080px wide. If you have a larger logo image or full-width hero image that you'd like to exceed this 1080px width container, you can follow these steps to remove the width restriction on the logo image area.

We will need to access the theme's "header.php" file.
You can navigate to WP Dashboard > Appearance > Theme Editor > and open the "header.php" file. 

Within "header.php" file, on Line 68, you will see the following code:

<div class="container">


You can delete this code.

Then, on Line 92, you will see this bit of code:

</div>


You can delete this code as well.

Be sure to save the file when you're finished.

Lastly, navigate over to WP Dashboard > Appearance > Customize > Custom CSS/Additional CSS. Copy and paste the following code:

#logo img {
max-width: 100%;
width: 100%;
}


Be sure to save when you're finished.

For full-width images, we recommend using images with a width of at least 1920px.

Keep in mind that your image will size down proportionately based on the width of the device's screen (for example, imagining how the image will display on a mobile phone as opposed to a desktop screen), so using an image with a height of approximately 500px may be ideal.