---
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-09-14
lang: en
author: "Aditya Sharma"
description: "Wedding sites, portfolios, bands and event pages often want a track available without forcing it on anyone. A button in the header does that: audio stays one click away and..."
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: 731
---

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

## 

- The Plus Addons for Elementor Header Meta Content widget adds a Music item that points to a single .mp3 or .ogg file from the media library.
- The Music item needs the Pro version, and the free plugin labels it Music (Pro) while nothing is drawn.
- Display Music must be switched on in Music Options before anything appears, and the button sits in the header row like any other item.
- The music button starts only after a visitor clicks, loops until stopped, and shows no progress bar, visitor volume control, or track name.

Wedding sites, portfolios, bands and event pages often want a track available without forcing it on anyone. A button in the header does that: audio stays one click away and never starts by itself.

The Header Meta Content widget in The Plus Addons for Elementor adds one as a **Music** item, pointed at a single `.mp3` or `.ogg` file from your media library.

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

***Requirement - This part of the widget needs the PRO version of The Plus Addons for Elementor, installed and activated.***

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

Table Of Contents

## Before You Start

- **Edition:** **Pro** — the **Music** item needs the Pro version. In the free plugin the **Select Options** dropdown labels it **(Pro)**, and turning its **Display** switch on renders nothing.- **Widget to enable:** Header Meta Content, switched on under **The Plus Addons > Widgets**.- **An audio file uploaded to your media library.** The field is labelled **Audio .Mp3/.Ogg**; copy the file's URL from the library before you start.- **Where to add it:** your header template, so the row shows on every page. The widget's own **Use with Theme Builder** section links to a **Create Header Template** button.- **Two steps, always:** adding an item in **Meta Content** is only half of it. Nothing appears until you also turn on that item's own **Display** switch in its section further down the Content tab.

## Add the Music Item

- Upload your audio file under **Media > Add New** and copy its URL.- Add the **Header Meta Content** widget to your header template.- In **Meta Content**, open the item and set **Select Options** to **Music**.

![Select Options set to Music in the Header Meta Content widget's Meta Content repeater](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-select-music-select-icon-list.webp)

- Turn on **Display Music** in the **Music Options** section and paste the file URL into **Audio .Mp3/.Ogg**.

![Audio .Mp3/.Ogg field in the Music Options section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-music-options-music-audio-file.webp)

- Pick an **Icon Style** and set **Music Volume** if you want.

![Music Volume slider in the Music Options section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-music-options-music-volume.webp)

## Music Options Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Display Music | Turns the music button on. Nothing renders without it | Off |
| Icon Style | Two designs for the button, Style 1 and Style 2 | Style 1 |
| Audio .Mp3/.Ogg | The URL of the file to play | Empty |
| Music Volume | A 0 to 100 slider. See Limitations — it does not reach playback | 50 |

## How It Behaves

The button sits in the header row like any other item. Clicking it starts the track and the button changes colour while the audio is playing; clicking it again stops the audio and the button returns to its resting state.

![Music button in a site header in its playing state, coloured red with animated bars](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-result-music.webp)

![Animated demo of the header music button playing and stopping audio](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-music-demo.gif)

- Nothing plays until a visitor clicks. There is no autoplay.- The track loops until it is stopped.- There is no progress bar, no volume control for the visitor and no track name — it is a play and stop button only.- The **Music Bar Style** section on the Style tab appears once **Display Music** is on.

## Limitations

- **Music Volume** does not set the volume a visitor hears. The value reaches the page, but the player fades to its own fixed level before playing: with the slider at 30 the audio played at full volume, and with the slider at 100 it played at half. Set the level in the audio file itself if it matters.- One file per item. There is no playlist and no second track.- The field is labelled for `.mp3` and `.ogg`, and the widget does not check what you paste. A URL in another format simply will not play.- The button is given a fixed HTML id, so two **Music** items on one page produce duplicate ids.- Browsers block audio that starts without a click, so the track can only begin from the button.- The whole item needs Pro. In the free plugin the dropdown shows **Music (Pro)** and nothing is drawn.

## Troubleshooting

### The music button does not appear

Check both halves: a **Meta Content** item set to **Music**, and **Display Music** switched on in **Music Options**.

### Clicking the button does nothing

Open the URL in **Audio .Mp3/.Ogg** in a new browser tab. If it does not play there, it will not play here. Check that the file is publicly reachable and is really an `.mp3` or `.ogg`.

### The audio is louder or quieter than the slider says

That is expected: **Music Volume** does not reach playback. Re-export the audio at the level you want.

### My Style tab changes do not show

The **Music Bar Style** section only applies while **Display Music** is on. Turn it on, then style.

## Related Docs

- [Header Meta Content Widget Settings Overview](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/)- [How to Add WooCommerce Mini Cart in Elementor Navigation Header Menu?](https://theplusaddons.com/docs/add-woocommerce-mini-cart-in-elementor-navigation-header-menu/)- [How to Add Elementor Menu Toggle Button in Header?](https://theplusaddons.com/docs/add-elementor-menu-toggle-button-in-header/)

## Frequently Asked Questions

**Q: What do I need before adding a music player bar to an Elementor header menu?**
A: The setup depends on three things: the Header Meta Content widget must be enabled under The Plus Addons for Elementor, the Music item needs the Pro version, and you need a publicly reachable audio file in your media library. The page labels the file field as Audio .Mp3/.Ogg, so keep the file URL handy before you start. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this Music item inside the header template workflow.

**Q: Why is my music button not showing in the header?**
A: The usual miss is only setting the item to Music without turning on its own Display Music switch. Both halves have to be active: a Meta Content item set to Music and Display Music switched on in Music Options. Another gotcha is edition level, because the Music item needs Pro and the free plugin shows it as Music (Pro) without drawing anything. That makes this one of those cases where the item exists in settings but still renders nothing.

**Q: Does the music player bar work with MP3 and OGG files only?**
A: The widget is built around a single .mp3 or .ogg file from your media library, and the field is labeled Audio .Mp3/.Ogg. The page also says it does not check what you paste, so a URL in another format simply will not play. That matters because the button can still be configured normally while playback fails silently if the file type is wrong or the URL is not publicly reachable.

**Q: Why does clicking the music button do nothing?**
A: Playback depends on the file being reachable in a browser first. A quick test is to open the Audio .Mp3/.Ogg URL in a new tab; if it does not play there, it will not play from the header either. The page also notes that browsers block audio that starts without a click, so this feature is intentionally click-to-play only. If the file is private or not really an .mp3 or .ogg, nothing will happen.

**Q: What is the best way to set music volume for this header player?**
A: The slider is not a reliable way to control what visitors hear. The page says Music Volume reaches the page but fades to its own fixed level before playback, with 30 playing at full volume and 100 at about half. If loudness matters, set it in the audio file itself instead of trusting the slider. That makes volume control more of a hint than a true output setting.

**Q: Can I use more than one music player bar in the same header?**
A: The page treats this as a one-file-per-item setup, so there is no playlist and no second track inside a single Music item. It also warns that each Music item gets a fixed HTML id, which means two Music items on one page create duplicate ids. In practice, that makes multiple players on one header a bad idea because it can cause markup conflicts even if both items are configured correctly.