How to Adjust the Header for Desktop View and Mobile View on a WordPress Elementor Created Website

Are you struggling to customize the header of your WordPress website, built with Elementor, to look perfect on both desktop and mobile devices? You’re not alone! In this article, we’ll guide you through a step-by-step process to adjust the header for desktop view and mobile view on your Elementor-created website.

Understanding Responsive Design

Before we dive into the tutorial, it’s essential to understand the concept of responsive design. Responsive design is an approach to web development that focuses on creating websites that adapt to different screen sizes, devices, and orientations. This means that your website’s layout, content, and visual elements should respond to the user’s behavior and environment.

Why is Responsive Design Important?

• The majority of users access websites through mobile devices, and a responsive design ensures a seamless user experience across devices.

• A responsive design improves search engine optimization (SEO) as Google recommends responsive design as the best approach for mobile-friendliness.

• A responsive design saves time and resources by eliminating the need to maintain separate versions of your website for different devices.

Adjusting the Header for Desktop View

Let’s start by adjusting the header for desktop view. Follow these steps:

1. Log in to your WordPress dashboard and navigate to the Elementor editor.

2. Select the header section by clicking on the “Header” widget in the Elementor panel.

3. Click on the “Advanced” tab in the Elementor panel.

4. In the “Advanced” tab, click on the “Responsive” tab.

5. In the “Responsive” tab, you’ll see three tabs: “Desktop”, “Tablet”, and “Mobile”. Click on the “Desktop” tab.

6. Under the “Desktop” tab, you can adjust the header’s layout, padding, margin, and other styling options to your liking.

7. Click “Apply” to save your changes.

Note: You can also use Elementor's drag-and-drop feature to adjust the header's layout and styling options.

Adjusting the Header for Mobile View

Now, let’s adjust the header for mobile view. Follow these steps:

1. Repeat steps 1-5 from the previous section to access the “Responsive” tab.

2. Click on the “Mobile” tab.

3. Under the “Mobile” tab, you can adjust the header’s layout, padding, margin, and other styling options to your liking.

4. Pay attention to the following styling options, which are crucial for mobile view:

• Logo width and height

• Navigation menu layout and styling

• Header padding and margin

5. Click “Apply” to save your changes.

Tip: Use Elementor's built-in mobile simulator to preview your header's design on different mobile devices.

Using Elementor’s Built-in Breakpoints

Elementor provides built-in breakpoints to help you adjust the header’s design for different screen sizes. Breakpoints are predefined screen sizes that trigger specific styling options. Follow these steps to use Elementor’s built-in breakpoints:

1. Access the “Responsive” tab in the Elementor panel.

2. Click on the “Breakpoints” tab.

3. Select the breakpoint you want to adjust (e.g., “Desktop Large”, “Desktop Medium”, etc.).

4. Adjust the header’s styling options for the selected breakpoint.

5. Click “Apply” to save your changes.

Breakpoint	Screen Size
Desktop Large	1400px and above
Desktop Medium	1025px – 1399px
Desktop Small	769px – 1024px
Tablet	768px – 768px
Mobile	Below 768px

Using Custom CSS for Advanced Styling

If you need more advanced styling options for your header, you can use custom CSS. Follow these steps:

1. Access the “Advanced” tab in the Elementor panel.

2. Click on the “Custom CSS” tab.

3. Write your custom CSS code in the text area.

4. Use the following CSS selectors to target the header and its elements:

• .header-wrapper (target the entire header)
• .header-logo (target the logo)
• .header-nav (target the navigation menu)

5. Click “Apply” to save your changes.

Example:

.header-wrapper {
  background-color: #f7f7f7;
  padding: 20px;
}

.header-logo {
  width: 100px;
  height: 50px;
}

.header-nav {
  font-size: 16px;
  text-align: center;
}

Conclusion

Adjusting the header for desktop view and mobile view on a WordPress Elementor-created website is a straightforward process. By following the steps outlined in this article, you can create a responsive header that adapts to different screen sizes and devices. Don’t forget to use Elementor’s built-in breakpoints and custom CSS for advanced styling options. With these tools, you’ll be able to create a stunning header that enhances the user experience and improves your website’s overall design.

Remember, a responsive design is crucial for providing a seamless user experience across devices and improving search engine optimization (SEO). By investing time and effort into adjusting your header’s design, you’ll be able to create a website that stands out from the competition and attracts more visitors.

Here are the 5 Questions and Answers about “How to adjust the header for Desktop view and Mobile view over WordPress Elementor created website?” written in a creative voice and tone:

Frequently Asked Question

Want to know the secret to make your website’s header shine on both desktop and mobile views? Look no further!