mobile header – XTRA Tutorials

Search Form & Account Icon Above Mobile Menu

XTRA — Tue, 29 Jul 2025 12:00:18 +0000

Displaying Search and Account Icons Above the Mobile Menu

Step 1

XTRA

You can now place a search form and user account icon directly above the off-canvas mobile menu. This layout improves accessibility by giving mobile users quick access to search and login functionalities.

You can access the settings at:

Theme Options > Header > Mobile Header > Above Menu

When enabled, your mobile menu will display a clean search bar along with an optional account/login icon. This setup is especially useful for eCommerce sites, blogs, and content-rich websites where fast navigation matters.

This user interface adjustment enhances the mobile experience by streamlining interactions and improving overall usability on small screens.

How to add/remove Expandable Menus for Fixed Mobile Navigation?

XTRA — Sun, 27 Jul 2025 10:11:39 +0000

Expandable Menus for Fixed Mobile Navigation

Step 1

XTRA

Expandable menus in the mobile fixed navigation area allow you to create cleaner and more dynamic mobile menus, improving both usability and design. This feature is especially useful for websites with multi-level menus or extensive product categories, as it helps organize submenus in a sleek, expandable format.

Where to find it?
Theme Options > Header > Mobile Fixed Navigation > Expandable Menu

How to change mobile menu copyright text?

XTRA — Tue, 17 Sep 2024 09:31:32 +0000

Enable/Disable Copyright in Mobile Menu

Step 1

Xtra

In our WordPress theme, there is an option to display the Copyright along with the year in the mobile menu. This tutorial explains how to edit or remove this copyright text.

Go to Theme Options > Header > Mobile Header > Mobile Menu Additional > Custom Text

How to Easily Change Header Logo Size and Spacing on Mobile Devices?

XTRA — Sun, 01 Sep 2024 12:01:42 +0000

Description and Screenshot

Step 1

XTRA

Changing the logo size and margins in the mobile header

Here, we want to show how to resize the logo in the mobile header and adjust the margin from all sides.

Go to the Theme Options > Header.
Go to the Mobile Header where the logo is located.
Change the size in this field.
Adjust the margins here.

How to Fix a Missing Mobile Menu?

XTRA — Mon, 26 Aug 2024 09:32:39 +0000

Description and Screenshot

Step 1

XTRA

Solving the problem of not displaying the mobile menu

If the mobile menu is not displayed, it is necessary to check the following two paths according to the screenshot, so that the mobile menu is checked.

First, check that the mobile menu is selected in the menu list from the :
Theme options > Header > Mobile Header ,
and then check that you have selected a header for mobile from the:
Dashboard > Appearance > Menus > Menu Settings > Display location > Mobile .

Theme Options: Mobile Header

XTRA — Tue, 25 Jun 2024 11:49:59 +0000

Description and Screenshot

Step 1

XTRA

Mobile Header settings

Under Theme Options > Header > Mobile Header you can find mobile header elements, settings and StyleKits.

Sticky mode – Enable/disable sticky mode for mobile header
Content Before Header – Create custom page and assign its content before header
Content After Header – Create custom page and assign its content after header
Add Elements – Add or remove new custom elements for mobile header
Menu StyleKits – You can customize menu styling for mobile header
Mobile Menu Social – Enable/disable mobile OffCanvas menu social icons
Mobile Menu Text – Add custom text below social icons in mobile OffCanvas menu
Additional StyleKits – Customize social icons and text in mobile OffCanvas menu

Tips

You may want to know …

Mobile Menu – You can create custom menu from Appearance > Menus and assign its location to mobile, then in mobile header elements you can set location to mobile menu.
Content Before/After – From Dashboard > Pages you can create a custom page and then in mobile header setting select it before or after header and theme will show that page content in mobile only.