Position & Transparency

Noor includes an option to position the header to the top, left or right of your website. You can also choose to make your main header’s background transparent, or your top header too. All of these options can be selected globally in WordPress Customizer, or individually per page or post with the Page Options, which will override the global Customizer Options.

Header Position

Customize > Header > Header Style: Header style options allows you to set the header position, header layout and other custom options for your header. Choose between 8 Styles. Continue reading below for an explanation on each position and style.

• Top Position – You can choose from 4 different styles (  Classic, Big header, Logo on Bottom, Logo on Center ) Transparency and full-width header will work when using a top header. Read more about Top Headers here.
• Right,/Left Position – For Headers set to either the right or left position, you can choose from 2 different styles ( Classic Vertical, Minimal Vertical ). Every header content option will work with left/right header positions. Transparency and full-width header will not work with a left/right header. Read more about Side Headers here.

Header Transparency

By default, any header layout you choose will have a background color set. Please note that when using top header position and have the opacity set to anything below 1 (0-.9) the header background area height disappears and the slider below it will show behind the header in its place. This option works best with a page slider or large image so it moves up behind the header as illustrated in this demo example. Continue reading below to learn how to change your header’s background color and transparency.

How To Set Header’s Background Color And Transparency

Step 1 – Open Customize > Header > Menu

Step 2 – Locate the NavBar Background Color option

Step 3 – Choose a color from the palette or you can enter the hex code of your desired color manually.

Step 4 – You can set the opacity of the background color by adjusting the opacity bar on the right. Set it to 0 to make it transparent or to 1 to make it a solid color.

Step 5 – To set the header’s background color and opacity individually per page or post, navigate to the Header tab in Page Options located on every page or post you create. These options override the global Customize Options.