In this article, I’ll show you how to easily remove the header in WordPress.

The method that I’ll show you in this article will work for any theme.

How to Remove WordPress Header

There are few methods how to hide the header and here are the ones that we will cover:

• Page template.
• Theme-specific.
• CSS.

Let’s start with the first way.

Page Template

The page template defines what are the components that will be displayed.

Most themes today come with few page templates to suit different needs. In general, the default template will include the header, body, and footer. However, other templates will hide the header and the footer.

Thanks to the gain of the popularity of page builders (like Elementor), most themes are coming with few templates to choose from.

To see the different page templates of your theme, edit the page whom you’d like to remove the header.

Second, expand the page attributes tab at the bottom right corner to expose the templates menu. Then, choose a different template instead of the default one and click update.

Most times, a template called landing page or canvas will do the trick. After updating, revisit the page and verify that the header was removed successfully. If not, choose a different template and repeat the process.

Based on the theme you’re using, you may not see the same templates as in the image above. Every theme has different templates but most of them should have at least one no-header template.

Theme-Specific Page Settings

This theme-related method will use the different page settings that your theme provides.

Like the page attribute method above, this method is also theme-specific and can’t be applied to all themes. However, most themes, or at least the popular ones, will have some kind of settings to hide the different elements of the page such as header or footer.

So, let me walk you through two different examples.

In the Astra theme, launch the edit screen of your desired page and expand the Astra settings tab from the bottom right corner.

There, below the disable section title, you can check all the boxes of the sections that you would like to remove.

To remove the header, check the top box called disable primary header and update the page.

Once saved, the header was removed and won’t be load with the page anymore.

Astra also enabling you to remove the page title, however, if you’re using a page builder, read our article on how to remove the page title with Elementor.

With some other themes like OceanWP, you’ll need to install an extra plugin to have that functionality.

The OceanWP theme combined with the Ocean Extra plugin will add a settings box below the post in the editor screen.

Click on the header tab, set both options to disable, and update the page. Finally, revisit your page to make sure the header is no longer presented.

While both ways above are theme’s related and may not work with the one you’re using, the next way will work with any theme.

Remove WordPress Header with CSS

With the CSS method, we will apply the disable: none rule to the header section to hide it.

First, navigate to the desired page, right-click on the header and choose the inspect option.

Then, look for the header tag or div inside the console. We will need to find its class name in order to target it.

In the image below, it’s a header tag with the class of site-header. Actually, there are two classes that are separated with white space but we will choose the first one. Thus, copy the class name to the clipboard, we will use it shortly.

Second, open the customization screen and enter into the additional CSS option.

On this screen, paste the CSS rule below and click publish.

.site-header {
	display: none;
}

Make sure to change the class of the code above with the actual class of your header.

After applying the CSS, the header should be removed and no longer be displayed on the page.

The code above will remove the header from your entire WordPress website. If you would only like to hide it for a specific page, add the page ID number to the rule.

Inspect the page once again and now travel up the DOM to the body tag. The body tag class will contain the page ID number in it.

Copy the body class and add it to the left of the header class like so:

.page-id-114 .site-header {
	display: none;
}

Make sure to change the page ID with the actual ID number of your page. Once applied, publish the changes and revisit your page to verify.

The body class is not the only way to find the page ID. For more ways, read our article on how to find the page ID in WordPress.

Related Articles

• How to add header image in WordPress
• Create transparent header with Elementor
• Add icons to any menu in WordPress

Conclusion

This article taught you in detail how to remove the header from any page on your WordPress website.

Leave us a comment down below and let us know which method you used to accomplished that.

The post How to Remove the Header in WordPress (3 Methods) appeared first on PluginsForWP.

You can easily create your website header with the theme builder feature of Elementor pro.

In this article, you’ll learn how to make a transparent header with Elementor.

What is a Transparent Header

The transparent header is the section at the top of the page and has a very light or no background color.

Transparent sections are in front of the other sections and will show their content. It’s a relatively new style that can be seen on many websites.

This new minimalistic look will blend smoothly with any page and transfer the focus to the hero section of the website.

That way, you won’t need to match the first section to the header’s style. Instead, the header will automatically adopt the section’s look behind it and will look like a single unit.

Make a Transparent Header with Elementor

Creating the transparent header is an easy process that you can do by changing the section’s settings and some simple CSS rules.

We have to remove the header’s background and then push the section behind it to the top of the page.

Step #1: remove the background

In the first step of the process, we need to remove any background color that the header may have.

Therefore, click on the header’s section, switch to the Style tab, and remove the header’s background color.

Step #2: prioritze the layer

The z-index is a way to prioritize the layer’s order. The elements with the higher z-index value will be displayed on top of the lower-valued ones.

To ensure the header will be on top of the section behind it, we must give the title a sizeable z-index value.

While editing the header, move over to the advanced tab and increase the z-index property to 10.

Step #3: add custom CSS

We will add the custom CSS rules to make the header float on top of the other sections in this last step.

We’re asking the browser’s engine to position the content at the top of the page behind the header.

Under the advanced tab, expand the custom CSS option and paste this code:

selector {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

After pasting the code, publish the template and revisit one of your website’s pages to view the changes.

See-through background-color

Another option is to paint the header with a light opacity background color to match your brand’s colors.

Instead of removing the background (step #1), choose the desired color but lower the opacity.

Thanks to the low transparency number, the section behind the header will be visible.

Step #4: Add top padding (optional)

Sometimes, the header elements will hide essential parts of the section behind it. Thus, we should fix it by increasing the padding number of the back section.

Open the Elementor visual editor of the page with the hidden section, and click on it.

Navigate to the advanced tab and increase the top padding to match your style needs. Adding padding will keep the section at the top of the page and push the content downward from the inside.

Last, save the changes and revisit the page to view it live.

Sticky, Resize, and Special Effects

Making a transparent header is a design upgrade. In this section, I would like to show you how to take it further and improve it.

Sticky header

A sticky header will always stick to the top even while scrolling up or down the page. This is a handy feature because it will keep the site’s links accessible at any time.

Combining both methods enables us to create any header design we can dream of without coding.

Make sure also to read our article on how to create a sticky header with Elementor to learn more about the subject.

Adding sticky effects to the header can improve your website visitors’ experience. Therefore, I recommend you do it.

First, expand the motion effects tab and change the sticky option to the top.

When scrolling, it’s best to give the header a background color to make the links visible on white background sections.

Then, set the effects to offset number to define how many pixels add the background color. I entered 100, meaning that the new background color will fire after scrolling 100px from the top.

A CSS class elementor-sticky--effects will be added to the header section when reaching the effects offset number above. Add the CSS rules below to apply to the new class.

Expend the custom CSS tab and enter these rules:

.elementor-sticky--effects {
   background-color: #66c0ff82;
    transition: 0.5s ease;
}

A light blue background will be added to the sticky header when reaching the set scrolling point.

If you want to change the color to a different one, replace #66c0ff82 it with your desired color’s code.

You can read our how-to change link’s color in the WordPress article to learn how to get the color code.

Shrinking header

Another cool trick that often can be seen with many websites is the shrinking header when scrolling down.

The tallest element inside of it usually determines the height of the header.

Many times, the logo’s height is the one that sets the header’s height, while in other times, it’s the padding of the menu’s links.

The CSS below will tackle both options.

Resize the logo

Paste the code below inside the custom CSS tab of the header’s section to reduce the logo size to 50%:

.elementor-sticky--effects .logo img {
width: 50% !important;
}

Save the changes and test your website. If the logo size sets the section’s height, that should address it. However, if the link’s paddings set the height, delete it, and keep reading.

Remove menu’s links padding.

If the header’s height is affected by the menus’ links padding, decreasing or removing the paddings should resize the header.

The CSS below will do the trick:

.elementor-sticky--effects a {
    padding: 0!important;
}

If non of the codes worked for you and the header’s height stayed the same, switch back to the content tab and change the size to default.

Finally, save all changes and test your website once again.

Conclusion

In this article, you’ve learned how to make a transparent header with Elementor easily.

Leave us a comment below and let us know if you need further help on the subject.

The post How to Make a Transparent Header with Elementor appeared first on PluginsForWP.

That is correct. A beautiful photo can deliver the right message better than just plain text.

This article will show you how to add a header image in WordPress.

Why Adding an Image to the Header

In most cases, there are two main reasons to set a header image (or a hero section image):

• The first reason is to grab the visitors’ attention.
• The second reason is to encourage them to act.

A good image can differentiate between a low rate converting website and a good one.

Take a look at the SnowboardAddiction website, for example. The hero section is just a big image with a call to action button at the bottom.

When you land on their page, you know exactly what to click on, there is a prominent call to action button, and you better jump into it before it’s over.

Now that you know why images are crucial for your website, I would like to show you where to find them.

Images for WordPress Header

To use any image for any part of your website, the image MUST be royalty-free and not copywriter protected.

Royalty-free images mean that you have or buy the rights to use the photos.

Searching for the right image and finding it on Google images does not give you the right to use it. Using the pictures without proper permission exposes yourself to getting sued by their owner, which should be avoided.

However, it would help if you didn’t lose hope. Many royalty-free images websites will let you download beautiful high-resolution quality images for totally free or for a small fee.

Royalty-free images (free)

Here is an excellent list of websites where you can download images for your WordPress website.

• Pexels
• Pixabay
• Unsplash
• Burst
• Freeimages
• Kaboom
• Canva
• Gettyimages
• Flickr

To download the header’s image. Navigate to the Pexels website and search for your desired image. In our example, I’ll look for snow.

Once searched, you’ll have many photos to choose from related to the subject. Navigate between them all and enter the image you would like to display on your website.

Last, click on the arrow next to the download button to choose the correct dimension.

Please note that any size larger than medium will use many sources and slow down your website’s loading speed. Therefore, the recommended size for a header is medium.

If you can’t find the right image and look for more options, check the other websites listed below.

Royalty-free images (paid)

Here is an excellent list of websites where you can download images for your WordPress website for a small fee.

• Istock
• Shutterstock
• Storyblocks
• Adobe
• 123rf

Downloading images from paid websites is a similar process to the one above.

Please search for your desired image, pay, and download it to your computer.

Shutterstock is running a great promotion now where you can get ten images for totally free.

Once you have downloaded the right image to your website’s header, move forward and add it to its header.

Add an Image to Header in WordPress

After we downloaded the right image for our website, it’s a good time to upload it to our WordPress website and add it to the header.

In this section, I’ll show you how to add the image to the header using a page builder like Elementor and also straight into the header.php file.

Method #1: Add an image using a page builder

You would be in luck if you built your website with a page builder such as Elementor.

Elementor or Divi are both super easy to use, and they prevent you from dealing with core files.

Add images in Elementor

If you are using Elementor as your page builder, follow the steps below.

Navigate to your header template under the Templates tab and click on Edit With Elementor.

Inside the editor screen, drag the image widget to the desired location and upload the royalty-free image you just downloaded earlier.

After selecting the image, make sure to style the widget as you wish and click publish when you have done.

Add images in Divi

To add an image to a header with Divi, follow the steps below.

Edit your header template by navigating to Divi -> Theme Builder -> Global header.

Then, add an image widget and select your desired image.

Make sure to style the widget and click save when done.

Method #2: Add an image to the Header.php file

This section will show you how to add a photo to your header using the header.php file.

I highly recommend you backup your website before modifying the files and applying the changes to the child theme.

From your WordPress dashboard, navigate to Appearance -> Theme Editor and click on the header.php file from the list on the right.

You’ll need to decide on the location where you would like to display the image.

Match the HTML element class of the DOM to the one inside the PHP file.

For example, if you would like to add an image just before the inner section of the header, inspect the DOM element, and find the desired class.

In the photo below, we would like to add an image just before the header-inner inner section.

After finding a suitable class, we will go back and look for it in the header.php file and paste the code below:

<img src="image-url-goes-here">

Make sure to replace the ‘image-url-goes-here’ text with the actual URL of the image.

Then, save the changes and revisit your website to ensure the image is where you intended it to be.

Method #3: Add an image with the CSS rule

Often we would like to add a background image to a section and not count it as a stand-alone element.

We can add a background image to any element or section as soon as we know the CSS class of the component.

The first step is to inspect the desired element and find its class.

Right-click on any element and choose Inspect.

Look for the element class and write it down or copy it to the clipboard. We will need it in a second.

Then, click on Customize from the Admin menu bar.

Then, navigate to the Custom CSS option.

Here, you will need to paste the code below inside the Custom CSS screen:

.class-goes-here {
	background-image: url('image-url');
	background-size: cover;
	background-position: center;
}

Make sure to replace the class-goes-here with the actual class of the element and the ‘image-url’ with the exact URL of the image.

The final result should look like that:

Once adjusting the code, click publish and revisit your website to ensure it looks as expected.

Conclusion

In this article, you learned how to add an image to your website’s header in three different ways.

Leave us a comment and know which method you used to achieve this task.

The post How to Add a Header Image in WordPress – The Ultimate Guide appeared first on PluginsForWP.

Elementor, one of the most versatile page builders plugins for WordPress, enables us to build a sticky header quickly.

In this article, you’ll learn how to create a sticky header with Elementor.

Why Create a Sticky Header

Elementor is now one of the most popular WordPress page builders plugins, and for a good reason.

Equipped with their theme builder feature, we can build great headers, footers, and sidebars in a breeze without any coding skills.

Page headers are one of the most critical sections of your website. It contains links and helps your visitors easily navigate your site pages.

The header appears at the top of the document and disappears from view when scrolling down the page. On the other hand, a sticky header stays visible on sight view even while scrolling down.

A sticky header will make the site navigation and the user experience way more manageable because it will keep the menus’ links visible at all times.

When the header links are invisible, there is a higher chance of navigating away from your website.

However, keeping the header at the top will increase the opportunity to click on the links and spend more time on your website. As a result, it will also improve the time on page parameter tracked by Google Analytics.

How to Make a Sticky Header with Elementor

Elementor is a very flexible page builder with many options to edit and design every page section. The header is one of the sections that we can edit.

We can use the theme builder feature of the Elementor pro to create and display a header on our website.

Step #1: Edit the header template

If you don’t already have a header, you’ll need to create one. Therefore, navigate to Templates -> Add New and create a new header.

If you already have a header (which I assume you do), navigate to Templates -> Theme Builder -> Header and click on Edit with Elementor.

Once the visual editor is loaded, we can move forward to set it up.

Step #2: Enable the sticky feature

Click on the setting of the section you want to target and navigate to the Advanced tab.

Then, expand the Motion Effects option, and change the sticky field to the top choice.

Under the Sticky On field, decide which devices the header will be sticky on. The default is set to all devices, but you can remove any device based on your needs.

Once done, update the changes and move on to the next step.

Step #3: Test the header

If done correctly, the header should stick to the top and scroll down or up with the window.

Navigate to any page that triggers the header and ensure it’s scrolling down the page.

Most times, that did the trick, and your job is done. Sometimes, however, the sticky header will not function as expected, and we need to fix it.

Troubleshooting for Sticky Headers

After creating a sticky header, you may notice some problems with it. Here are a couple of the most common issues that may happen:

• The sticky header is transparent with no background color.
• The header is hidden behind the content.

Don’t worry. Both problems are easy to fix. Let’s start with the first one.

Fix the transparent header without a background-color

That usually happens when the header background color is white, but you did not define it to be while. It is a transparent color, and the default color of the body tag is the color you see, as we discussed in our making a transparent header tutorial.

To fix this issue, you’ll need to define and set the background color of the header to have a color as well. Thus, under the Style tab of the header, set the background to solid or gradient and pick your desired color.

Once saved, the header will be visible over the other sections behind it and won’t blend in.

Fix header hidden behind the content

Another common issue is that the other sections cover the header when scrolling down the page.

That happens because the other elements have a higher z-index. To fix that, we will need to increase the z-index value of the header section.

The z-index property in CSS controls the vertical stacking order of elements that overlap.

css-tricks.com

Navigate to the Advanced tab of the header, fill the Z-Index field with the 9999 value and save the changes. If you don’t see any difference, increase the number by adding another 9 to 99999.

Add Effects Offset to the Header

A tall header can take a large portion of your screen view and bother the readers of your website. The goal of a sticky header isn’t to take the focus off your content but to help your visitors to navigate easier.

In those cases, you’ll need to adjust the size of the header in its sticky mode. You’ll need to inspect some parts of your title and modify their values to create the correct result.

Let’s take Kinsta, for example. 100px after scrolling down the page, their header shrink and is painted with a white background color.

To achieve similar results, open the Advanced tab and set the effects offset option to 100 (or any other number).

By doing so, Elementor will add a class called --effects to the header section every time you’ll scroll below the entered number (100px in our case).

We must apply the styles we want for the --effects class based on what we want to achieve.

For example, we’ll need to inspect which elements to change or adjust to resize the header.

In our header, we have two columns. Our website logo is on the left, and the menu is on the right.

When we inspect the logo image, we can see that the default width of the logo is 120px. Because the header takes the height of his child elements, we will need to change the size of the elements.

Images keep an auto ratio between width and height, so changing the image’s width will change the size simultaneously. Therefore, we can change the width of the image to 90px for the --effects class and the height will decrease as well.

Style the elements with CSS

To add custom CSS to the Elementor header section, click on the Custom CSS option under the Advanced tab. To target the current selection, we will need to use the selector along with the child section class.

In our example, because we want to target the logo image of the header section, we will use the following:

selector.elementor-sticky--effects img {
width: 90px;
padding: 5px;
}

The code above will work only when the --effects class was triggered and will reduce the image width and height sizes. However, adjusting the logo isn’t enough, and we should also change the links.

Inspecting the menus’ links reveals that their heights are set by the top and bottom padding and are 35px each. That is why changing the image size by itself isn’t enough. Thus, changing the menu items’ top and bottom padding will adjust the header’s height.

To do that, we can use the following:

selector.elementor-sticky--effects .elementor-nav-menu--main .elementor-item {
padding-top: 20px;
padding-bottom: 20px;
}

That will reduce the top and bottom padding of the links from 35px to 20px.

Changing the logo size and links will adjust the header’s height and display the desired result.

To smooth the height transition of the elements, we can use the values below:

selector > .elementor-container {
transition: all 1s;
}

The adjustments above will work for most scenarios, but it’s not guaranteed to work for all. Try it with your header first. If it doesn’t work, inspect and find which elements define your header’s height and modify them.

Additional Sticky Header Options

There are multiple various ways to improve your Elementor sticky header, and here are some of them:

• Make it a transparent header.
• Change the background color on the scroll.
• Add a bottom border.
• Shrink it down.
• Shrink and change the logo.
• Blur the background color.
• Display the sticky header when scrolling up.

Using Elementor to create a simple sticky header is an easy task. Adding the extra styling options, however, like CSS or JavaScript, is for more advanced users.

Luckily, there is a great plugin that will enable us to do all the options above without adding any custom codes.

Thus, from your WordPress website, navigate to Plugins -> Add New, and install the Sticky Header Effects plugin.

Once activated, edit your header template with Elementor and move to the advanced tab of the header section.

Expand the new sticky header effects tab, and toggle the checkbox option to on.

For some of the options to work flawlessly, verify that the Scroll Distance value of the Sticky Header Effects matches the Effects Offset number under the Motion Effect tab.

Then, toggle your desired sticky effect to on and go through the different setting options of it.

Transparent header effect

The transparent header option is useful when you would like the header to adopt the background color or image of the section behind it.

Initially, enabling the transparent option will add the CSS property position: absolute to the header section and will jump the section below it to the top of the page.

That will create an illusion that the header and the section below it are one and will look good.

Keep in mind that when enabling this option, the menu link’s colors should be different than the background color of the rear section.

You can also explore additional ways to create these effects by reading our Elementor and transparent header article.

Changing background color on scroll

When enabling the background color option, you’ll be able to assign a different color to the sticky header once it reaches the set scroll distance value.

Once enabled, click on the color square and choose a different color for the sticky header.

You may not see the effect working when testing inside the header template. Therefore, save the changes and try it once again on the live website.

Shrinking header effect

Often, when creating a sticky header, it will be wise to shrink it when scrolling down. Doing so will make sure that the header is still available on view but doesn’t harm the user’s experience.

Once enabling the Shrink Header effect, drag the bar to the desired number to set its new height after it enters its sticky phase.

Remember that header cannot shrink smaller than the elements inside of it. If the shrink effect doesn’t work, you’ll need to adjust the header’s elements height like changing the logo size, links sizes, etc.

Please remember to save the changes inside the visual editor first and then test the shrinking effect on your live site.

Sticky header on scrolling up

The hide header on scrolling down is one of my favorite options. Enabling this option will hide the header if scrolling down and show the sticky header when scrolling up.

The logic behind this sticky behavior is to minimize the interference for your visitors when they’re browsing through your content.

Most likely, when scrolling down the page, the content to be revealed to your visitors is new, and they should better pay attention to it.

However, when scrolling up, the visitors are trying to get to the navigation links to explore other pages on your website.

Sticking the header when scrolling up will shorten this process and save your visitors valuable time.

Conclusion

In this article, you learned why and how to make a sticky header with Elementor.

If you have any questions or want to get specific CSS for the theme you’re using, please leave us a comment down below.

The post How to Create a Sticky Header with Elementor appeared first on PluginsForWP.