---
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
lang: en
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?

## 

- Adds a music player bar in the navigation header menu using the Header Meta Content widget from The Plus Addons for Elementor.
- Supports .mp3 and .ogg audio file types for seamless audio integration in website headers.
- Enables customization of icon spacing and visibility settings for different devices through 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/).