Update Header
Last updated
Last updated
Login site with Administrator account, go to frontend, move on Edit with Elementor in the Site Bar, select: header Banner.
a) Create Sticky Header in Desktop, Tablet/Mobile.
a) Create a Sticky Header for Desktop, Tablet, and Mobile
Click menu in the header, then go to Advanced tab, navigate to the CSS Classes section.
Add the following classes as needed:
header_sticky: Enables sticky functionality on Desktop.
mobile_sticky: Enables sticky functionality on Tablet/Mobile.
sticky_bg_dark: Sets a dark background when scrolling the page.
b) Show/hide Element in Desktop, Tablet/Mobile
Go to Pages >> All Pages: choose a page that want to change its header, move on header version tab:
Options in Header Version tab:
a) Global: Use the header that is set in Appearance >> Customize >> Header. click here for more details.
b) Default: Use Default Header. You only can customize this header in template file (header.php file in theme)
c) Header 1, Header 2, Header 3, Header Banner: Choose one of these headers for the page.
Suppose that, you like to choose "Header Banner" for all your pages
Go to Appearance >> Customize >> Header and select: Header Banner
However, Header you select in this section will be applied to all pages except some pages like the blog pages, shop pages. Therefore, you need to select "header banner" for blog pages and shop pages. Follow the step 2 to do this.
Go to Apperance >> Customize >> Blog >> Archive >> Header tab: Select Header banner in header tab.
Go to Apperance >> Customize >> Blog >> Single >> Header tab: Select Header banner in header tab.
Go to Apperance >> Customize >> WooCommerce >> Product Catalog >> Header tab: Select Header banner in header tab.
Go to Apperance >> Customize >> WooCommerce >> Product Detail >> Header tab: Select Header banner in header tab.
If you want to change the data in a header (e.g., logo, phone, social networks, etc.) :
Use Elementor if the header was built with Elementor.
Modify the data in the theme file (template-parts/header-default.php) if the header is the default header.
Please, note: When you change logo in site identity ( appearance >> Customize >> Site indentity ), this change will apply to default headers. With headers created by elementor, to change logo, you need to make it with Elementor.
a) Configure in the backend
Go to Appearance >> Menus >> Select "Primary Menu", then you move on Mega Menu
In Parent Menu, choose Menu Column: Support 1,2,3,4,5 columns
In Child Menu: Insert a short code of each page, then check the box: "Show as a heading"
To configure
b) Display in the Front end
use shortcode: [remons-elementor-template] here
You need to change image for header banner with Elementor
Suppose that you want to change image of banner header for Contact page
+ If you want to use an image for all header banners, follow these steps
Step 1: Go to: content tab >> Display background by feature image in post/type tab: choose "No"
Step 2: Go to: Advanced tab >> Background
Step 3: Press the Public button
+ If you want to use a private image for a particular banner, follow these steps
Step 1: Go to: content tab >> Display background by feature image in post/type tab: choose "Yes"
Step 2: Go to Contact page and set feature image for the page
Please, note: Watch video for detailed guide
