Creating sticky full width header in Metro Pro Theme

In this article I am introducing, how to convert the boxed header of Metro Pro theme into slim sticky full width header. Also I replaced the background logo with inline logo, added the toggle search icon at right of the logo and moved the mobile responsive menu icon at left side of the logo.

See the step-by-step instructions at below.

Step 1:

Creating a full width site header and removing the secondary navigation bar at top. Open the style.css file of your metro pro theme and replace all “.site-container” text with “.site-inner” text. Just apply the search & replace action.

This content is only available to members. You must subscribe the monthly membership plan ($9.99 USD).

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

13 Discussion to This Post

  1. Are there any required dimensions for the logo image?

    We can also change the color of the header, correct?

    • Are there any required dimensions for the logo image?

      RE: There have no mandatory size option. You can upload any size.

      ==================

      We can also change the color of the header, correct?

      RE: Yes. You will add the CSS in your style.css file like this

      .site-header {
      background-color: #333;
      }

        • There have no mandatory size option. For full width logo image you can use 1900×200 pixel image.

        • Via CSS you will change the color. Use the developer tools of Firefox or Chrome, find the correct CSS classname and add the CSS into style.css file.

Leave A Reply

Your email address will not be published. Required fields are marked *