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).
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;
}
What are the required dimensions for the logo image?
There have no mandatory size option. For full width logo image you can use 1900×200 pixel image.
How about changing the color of the menu?
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.
Awesome Tutorial. Thanks Chinmoy.
🙂
Can i make the header unsticky? I am not sure which code to change. Please guide a bit. Thanks
Replace
.site-header { background: #2f6e91; position: fixed; top: 0; width: 100%; z-index: 999; }WITH
.site-header { background: #2f6e91; position: relative; width: 100%; z-index: 999; }It worked but now there is a margin of 87px above nav bar and below header. How to fix it?
Remove code from line no 05 to 15 from site-header.js file. Hope it helps you
Thanks Worked like a charm.