Home / / Theme Options – Header

Theme Options – Header

13469 views
In this tutorial we show the default options, advanced custom templates with WpRentals Studio, and Elementor FREE integration Watch Video on Youtube

This article guides you through the various header customization options available in WP Rentals. Navigate to Theme Options > Header to access these settings.

You have the following options:

CONTENT

Header Settings

This screenshot shows the Header Settings panel in the WP Rentals theme options. Below is a breakdown of each setting and its function:

1. Display the header menu on user dashboard pages?

  • Yes / No Toggle
  • If enabled, the website’s header menu will appear on user dashboard pages.
  • If disabled, the header menu will be hidden when users are in their dashboard.

 

2. Wide Header?

  • Yes / No Toggle
  • If enabled, the header will stretch to full width (100%).
  • If disabled, the header will have a fixed width and align with the website’s container.

3. Select Header Type

  • Options: Type1 / Type2
  • Choose the header layout style. The appearance of each type depends on the theme’s design.

Type 1 – Menu, logo, and user menu in one row.

Type 2 – Logo in one row, menu and user menu in the second row

4. Header Alignment (Logo Position)?

  • Options: Left / Center / Right
  • Determines the position of the logo within the header.

5. Header Height

  • Input Field
  • Allows you to specify the height of the header in pixels.
  • Use only Numbers

6. Sticky Header Height

  • Input Field
  • Defines the height of the header when it becomes sticky (remains fixed at the top while scrolling).
  • Use Only Numbers

7. Border Bottom Header Height

  • Input Field
  • Adjusts the thickness of the border at the bottom of the header.
  • Use Only Numbers

8. Top Menu Font Size

  • Input Field
  • Set the font size for the top menu items.

9. Menu Item Font Size

  • Input Field
  • Allows customization of the font size for individual menu items.

Top Bar Widget Area

This screenshot shows the Top Bar Widget Area settings in the WP Rentals theme

Show top bar widget menu?

2. Show top bar on mobile devices?

  • Yes / No Toggle
  • If enabled, the top bar will also be shown on mobile devices.
  • If disabled, the top bar will be hidden on smaller screens.

Mobile Menu Settings

This screenshot displays the Mobile Menu Settings in the WP Rentals theme. Below is an explanation of the available setting:

Enable Sticky mobile menu header?

  • Yes / No Toggle
  • If enabled (Yes), the mobile menu header will remain fixed (sticky) at the top of the screen when scrolling.
  • If disabled (No), the mobile menu header will scroll along with the page.
  • Important Note: This setting does not apply if “Show top bar on mobile devices?” is set to Yes (found in the Top Bar Widget Area settings).

Hero Media Header

The global header for all pages and posts is set from: Theme Options → Header → Hero Media Header

This Section is explained in detail in this article https://help.wprentals.org/article/global-header-options/ 

Hero Media – Theme Slider

The Theme Slider allows you to create an engaging homepage header featuring property listings with images, links, and data.

This help guide provides details on all the settings you can manage in this section.

Below is a detailed explanation of each setting and how to adjust the menu colors to fit your theme.

Header Background Color
Changes the background color of the header.

Header Border Bottom Color
Sets the color of the bottom border of the header.

Top Menu Font Color
Changes the text color of the top menu items.

Top Menu Hover Font Color
Changes the text color when hovering over menu items.

Top Menu Hover Background Color
Changes the background color when hovering over menu items.

Top Menu Hover Type
Controls the type of hover effect (underline, background change, etc.).

Active Menu Font Color
Changes the font color of the active menu item (the current page).

Transparent Header – Top Menu Font Color
Changes the font color when the header is transparent.

Transparent Header – Top Menu Hover Font Color
Changes the hover font color with a transparent header.

Sticky Menu Font Color
Changes the font color when the header becomes sticky (fixed at the top).

Menu Item Color
Changes the color of menu items in their normal state.

Menu Item Background Color
Sets the background color of menu items.

Menu Item Hover Font Color
Changes the font color when hovering over menu items.

Top Bar Colors

This colors let you control the Top Bar Widget colors

Top Bar Background Color (Header Widget Menu)
Changes the background color of the top bar in the header widget menu.

Top Bar Font Color (Header Widget Menu)
Changes the font color of the top bar in the header widget menu.

Mobile Menu Colors

These settings let you change the mobile menu colors

Mobile Header Background Color
Changes the background color of the mobile header.

Mobile Header Icon Color
Changes the color of the icons in the mobile header.

Mobile Menu Font Color
Changes the font color of the mobile menu items.

Mobile Menu Hover Font Color
Changes the font color when hovering over mobile menu items.

Mobile Menu Item Hover Background Color
Changes the background color when hovering over mobile menu items.

Mobile Menu Background Color
Changes the background color of the mobile menu.

Mobile Menu Item Border Color
Changes the border color of the mobile menu items.

Custom Header with WPRentals Studio

If you want full visual control over your header, you can build a custom header template using WpRentals Studio and Elementor, then assign it to your site from Theme Options. This lets you create headers with custom layouts, buttons, icons, search elements, announcements, and different designs per page type.

Before you start

  • Make sure Elementor is installed and activated.
  • Make sure WpRentals Studio is available and active on your site.

Step 1. Create a custom header template

  • Go to WpRentals Studio in your WordPress admin.
  • Create a new template and select Header as the template type.
  • Click Edit with Elementor.
  • Build your header layout using the Studio header widgets and Elementor sections/columns:
    • Add your logo
    • Add your menu
    • Add buttons or icons (for example, Login, Submit Property, Contact)
    • Add optional content like an announcement bar or a secondary row
  • Save the template.

Step 2. Control where the header appears

  • Edit the template and choose where the custom header should apply (for example: global, homepage only, specific pages, specific categories).
  • If you are using multiple header templates, keep one as your default and create others for special sections of the site.

Helpful notes

  • Mobile layout: Always check your header on mobile and tablet. You may need a dedicated mobile row or a simplified menu.
  • Sticky header: Custom header template does not have sticky support
  • Transparent header: you will create this using Elementor Background color and margins