---
title: "How to Add a Music Player Bar in Elementor Navigation Header Menu?"
url: https://theplusaddons.com/docs/add-a-music-player-bar-in-elementor-navigation-header-menu/
date: 2023-10-28
modified: 2026-04-10
author: "Aditya Sharma"
description: "Do you want to add a music player bar in the navigation header menu? With the Header Meta Content widget from The Plus Addons for Elementor, you can easily add..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Add-a-Music-Player-Bar-in-Elementor-Navigation-Header-Menu_-1024x536.jpg
word_count: 318
---

# How to Add a Music Player Bar in Elementor Navigation Header Menu?

## Key Takeaways

- Header Meta Content widget from The Plus Addons for Elementor allows users to add a music player bar in the navigation header menu.
- Only .mp3 and .ogg audio file types are supported for the music player bar.
- Users can adjust the audio volume using the Music Volume slider in the Music Options tab.

Do you want to add a music player bar in the navigation header menu? With the Header Meta Content widget from The Plus Addons for Elementor, you can easily add a music player bar in the navigation header menu. 

This feature allows for easy access to music or audio clips while browsing the website, creating a seamless and enjoyable user experience.

*To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, [click here](/docs/header-meta-content-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, first you have to add the audio file in the media library.

> *Note: Only .mp3 and .ogg audio file types are supported.*

Then, add the Header Meta Content widget to the header template and follow the steps -

> *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.* 

1. In the **Meta Content** tab, you’ll find an item click to open it, then select **Music** from the **Select Options** dropdown.

![header meta content music](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-music.png)

Suggested reading, [5 best WordPress audio player plugins](https://theplusaddons.com/blog/best-wordpress-audio-player-plugins/).

Then do the necessary icon spacing adjustments from the **Icon Left Space** and **Icon Right Space** sections.

From the **Responsive Device** section, you can manage the visibility of the item for different devices if needed.

2. Then go to the **Music Options** tab and enable the **Display Music** toggle.

Select a style from the **Icon Style** dropdown.

3. In the **Audio .Mp3/.Ogg** field you have to add the audio file path.

From the **Music Volume** slider, you can adjust the audio volume.

![header meta content music settings](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-music-settings.png)

Now you’ll see a music player button in the header that you can use to play and stop the audio.

![header meta content music demo](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-music-demo.gif)

Also, read [how to add WooCommerce mini cart in Elementor navigation header menu](https://theplusaddons.com/docs/add-woocommerce-mini-cart-in-elementor-navigation-header-menu/).

## Frequently Asked Questions

**Q: What audio file formats can I use with the music player bar in Elementor?**
A: The music player bar supports only .mp3 and .ogg audio file types. This limitation means you need to ensure your audio files are in one of these formats before adding them to the media library for use in the Header Meta Content widget.

**Q: What should I do if the music player bar is not showing up in the header?**
A: If the music player bar isn't appearing, check that you've enabled the Display Music toggle in the Music Options tab. Also, ensure that the Header Meta Content widget is correctly added to your header template and that the audio file path is correctly set in the Audio .Mp3/.Ogg field.

**Q: What settings should I adjust for optimal visibility of the music player bar on mobile devices?**
A: To optimize the visibility of the music player bar on mobile devices, use the Responsive Device section to manage its visibility settings. This allows you to ensure that the player is appropriately displayed or hidden based on the device being used, enhancing user experience.