menus – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Thu, 31 Jul 2025 17:26:04 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 Overlay Effect for Dropdown and Shopping Cart https://xtratheme.com/docs/theme-options/overlay-effect-for-dropdown-and-shopping-cart/ https://xtratheme.com/docs/theme-options/overlay-effect-for-dropdown-and-shopping-cart/#respond Wed, 30 Jul 2025 07:06:56 +0000 https://xtratheme.com/docs/?p=4715

Overlay Effect for Dropdown and Shopping Cart

Step 1
XTRA

When a dropdown menu or the cart panel is opened, a focus overlay can appear between the header and the rest of the page content. This overlay helps visually isolate the active element, such as the navigation dropdown or shopping cart, by dimming the background and reducing distractions. It improves the user experience on both desktop and mobile by guiding attention and reinforcing the interaction context—especially useful for websites with complex navigation or eCommerce features.


Go to :
Theme Options > Header > Menus Hover Effects > Dropdown overlay

Qqqq1
]]>
https://xtratheme.com/docs/theme-options/overlay-effect-for-dropdown-and-shopping-cart/feed/ 0
How to setup Hover Effects for Menu Navigation? https://xtratheme.com/docs/theme-options/how-to-setup-hover-effects-for-menu-navigation/ https://xtratheme.com/docs/theme-options/how-to-setup-hover-effects-for-menu-navigation/#respond Sun, 27 Jul 2025 11:16:37 +0000 https://xtratheme.com/docs/?p=4659

Enhance Menus with Professional Hover Effects

Step 1
XTRA

Hover effects can add interactivity and style to your navigation menus. With over 30 options available, you can choose between subtle animations and bold transitions to suit your design needs.

You can access the settings at:

Theme Options > Header > Menu Hover Effects


These effects help your menus stand out, improve user experience, and enhance the visual appeal of your site—ideal for portfolios, agencies, or design-focused websites.

Hover menu eefect
]]>
https://xtratheme.com/docs/theme-options/how-to-setup-hover-effects-for-menu-navigation/feed/ 0
How to Fix Desktop Menu Displaying as Mobile Menu ? https://xtratheme.com/docs/how-to/how-to-fix-desktop-menu-displaying-as-mobile-menu/ https://xtratheme.com/docs/how-to/how-to-fix-desktop-menu-displaying-as-mobile-menu/#respond Sun, 06 Oct 2024 09:14:01 +0000 https://xtratheme.com/docs/?p=4557

Fixing the Issue of Desktop Menu Displaying in Mobile Format

Step 1
Step 01

The menu on the desktop may appear like the mobile version, and you might not know what the issue is. To fix this problem, follow the solutions below:

Disable all third-party plugins and check that WordPress, the Xtra theme, and the Codevz Plus plugin are up to date

 

Step 02

In the next step go to the:

Theme Options > General > Layoutand make sure responsive is disable.

General
Step 03

Clear your browser cache completely and test to see if the issue is resolved.

If the issue is not resolved, contact the theme support team

]]>
https://xtratheme.com/docs/how-to/how-to-fix-desktop-menu-displaying-as-mobile-menu/feed/ 0
How to Change the Menu Display Location? https://xtratheme.com/docs/how-to/how-to-change-the-menu-display-location/ https://xtratheme.com/docs/how-to/how-to-change-the-menu-display-location/#respond Wed, 25 Sep 2024 08:45:20 +0000 https://xtratheme.com/docs/?p=4458

Changing the Menu Display Location

Step 1
Step 01

You can select different locations in the Xtra WordPress Theme for displaying menus.

  1. The primary: display location for showing the menu is in the header for both desktop and mobile, and it has a default mode in the theme.
  2. One Page: For displaying the menu on single pages such as landing pages, etc.
  3. Secondary: You can create a custom menu and choose it for display on specific pages or posts.
  4. Footer: For displaying the menu in the footer of the site.
  5. Mobile: Display the menu in the mobile menu header.
  6. Custom Modes: If you intend to create a menu that does not appear in any of the locations mentioned above and, for example, is displayed using the menu element on a page or post, you can use this mode.
Menu lo
Step 02

In the next step, the process of adding a menu to the header and footer is explained.
Follow these steps to add a menu to the Header:

Go to:

Theme Options > Header > Header top bar/Header/Header bottom bar > Add Menu Element > Choose the Menu

Header menu
Step 03

Follow these steps to add a menu to the Footer:

Go to:

Theme Options > Footer > Footer Top Bar > Add Menu Element > Choose the Menu

Footer menu
]]>
https://xtratheme.com/docs/how-to/how-to-change-the-menu-display-location/feed/ 0
How to Change the Color of a Single Menu Item: A Step-by-Step Guide? https://xtratheme.com/docs/how-to/how-to-change-the-color-of-a-single-menu-item-a-step-by-step-guide/ https://xtratheme.com/docs/how-to/how-to-change-the-color-of-a-single-menu-item-a-step-by-step-guide/#respond Wed, 28 Aug 2024 14:05:10 +0000 https://xtratheme.com/docs/?p=3782

Description and Screenshot

Step 1
XTRA

Change the color of one of the menu items

Menu color

Using a different color for a menu item is a strategic design choice that serves to highlight, differentiate, and guide user actions, making navigation more intuitive and improving the overall user experience.

The steps for changing the color of a menu item from the menu list in Xtra WordPress Theme are provided below:

Menu color2
  1. Go to Dashboard > Appearance > Menus > Choose Your Menu > Choose an Item of Menu
  2. Turn on Advanced button
  3. Use the StyleKit to change the text color
  4. Click on save menu button
]]>
https://xtratheme.com/docs/how-to/how-to-change-the-color-of-a-single-menu-item-a-step-by-step-guide/feed/ 0
How to Add Subtitles or Descriptions to Menu Items? https://xtratheme.com/docs/how-to/how-to-add-subtitles-or-descriptions-to-menu-items/ https://xtratheme.com/docs/how-to/how-to-add-subtitles-or-descriptions-to-menu-items/#respond Wed, 28 Aug 2024 13:48:55 +0000 https://xtratheme.com/docs/?p=3777

Description and Screenshot

Step 1
XTRA

Enable Subtitle For Menu Items

Subtitle menu

Adding a subtitle or description to menu items on a website can enhance user experience in several ways:

  1. Clarification of Menu Items
  2.  Enhanced User Experience
  3.  SEO Benefits
  4.  Increased Engagement
  5.  Accessibility and Usability
  6. Brand Voice and Personality

The steps for activating the menu subtitle in Xtra WordPress Theme are fully explained below:

Subtitle2
  1. Go to Dashboard > Appearance > Menus > Choose Your Menu > Choose an Item of Menu
  2. Turn on Advanced button and write a subtitle in Subtitle field
  3. Click on save menu
]]>
https://xtratheme.com/docs/how-to/how-to-add-subtitles-or-descriptions-to-menu-items/feed/ 0
How to Add Badges to Menu Items? https://xtratheme.com/docs/how-to/how-to-add-badges-to-menu-items/ https://xtratheme.com/docs/how-to/how-to-add-badges-to-menu-items/#respond Wed, 28 Aug 2024 13:29:22 +0000 https://xtratheme.com/docs/?p=3770

Description and Screenshot

Step 1
XTRA

Enable Badge For Menu Item

Menu badg

A menu badge is a small, attention-grabbing indicator often placed next to a menu item in a website or application. It usually contains a short piece of information, such as a number or a word, that provides additional context about that menu item. Here’s why menu badges are widely used and the benefits they offer:

  1. Highlighting Important Information
  2.  Enhancing User Experience
  3.  Visual Appeal
  4.  Real-Time Updates
  5.  Improved Navigation

The steps for activating the menu badge in Xtra WordPress Theme are fully explained below:

Badge2
  1. Go to Dashboard > Appearance > Menus > Choose Your Menu > Choose an Item of Menu
  2. Turn on Advanced button
  3. Write text in Badge field
  4. Style the badge with the help of StyleKit and then click save menu
]]>
https://xtratheme.com/docs/how-to/how-to-add-badges-to-menu-items/feed/ 0
Theme Options: Menus https://xtratheme.com/docs/theme-options/theme-options-menus/ https://xtratheme.com/docs/theme-options/theme-options-menus/#respond Sun, 30 Jun 2024 07:59:35 +0000 https://xtratheme.com/docs/?p=2085

Description and Screenshot

Step 1
XTRA

WordPress Menus options

Under Theme Options > Menus you can find and customize your website menus and menu items, add or remove menu items.

  1. Created Menus – Here you can see your site created menus panel.
  2. Create New Menu – By clicking on this button you can create new empty menu.
  3. View All Locations – You can view and change all available menus location.
  4. Menu Name – Insert your custom menu name for use in elements.
  5. Add items – Reorder or add new menu item to current menu.
  6. Menu Location – Set current menu location to one of available menu locations.
Theme options menus
Theme options menus 2
Tips

You may want to know …

  • Other way – Also from Appearance > Menus you can find and customize your menus and menu items, add or remove items, etc.

  • How add Menu in header? Go to Theme Options > Header > Header or other rows, then add new elements in left, center or right place and choose Menu element.
]]>
https://xtratheme.com/docs/theme-options/theme-options-menus/feed/ 0
How to Change Menu Color and Styling on Your Website? https://xtratheme.com/docs/how-to/how-to-change-menu-color-and-styling-on-your-website/ https://xtratheme.com/docs/how-to/how-to-change-menu-color-and-styling-on-your-website/#respond Wed, 19 Jun 2024 09:06:35 +0000 https://xtratheme.com/docs/?p=3042

Navigation Menu

Step 1
Step01

Go to Theme Options

If you move the mouse cursor over the menu you can see the gear icon will appear left top of menu, you can click on it and directly navigate to this element settings in the header.

Menu color 1

You can see the settings of Menu element below:

Menu color 2

Scroll down the left panel to find the Menu Styling section.

Click on Menu Stylekit to open the modal styling box, you can find all styling you need inside the Stylekit.

Menu color 3

For changing the menu’s Hover color & styles click on hover on top of Stylekit modal.

Menu color 4
Step02

Menu Shape

For changing the menu shape styles and effects, click on Shape Stylekit on the left panel to open the Stylekit modal.

Menu shape
Step03

Drop Down Menu

For changing the menu Drop down styles and colors, you can use Dropdown Stylekit for whole dropdown and Inner Menus Stylekit for each menu items.

Menu drop down
]]>
https://xtratheme.com/docs/how-to/how-to-change-menu-color-and-styling-on-your-website/feed/ 0