How To Use The Navbar Widget By Atomic Addons

The Navbar widget by Atomic Addons shows one of your WordPress menus as a horizontal bar. Items with sub-items open dropdowns on hover, and the item of the page being viewed, with its parents, is marked as active. It suits the main navigation in a header template. This guide covers creating the menu, adding the widget and its settings.

Enable the Navbar Widget

Navbar is a Free widget and works with the free Atomic Addons plugin. A few of its settings, marked PRO in the panel, need Atomic Addons Pro; they are pointed out below. Switch the widget on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Navbar. You can also open the Menu / Navigation category.

4. 4

   Turn the Navbar widget on.

5. 5

   Click Save Settings.

Create the Menu

The widget shows a menu you build in WordPress, so make one first:

1. 1

   Go to WordPress Dashboard → Appearance → Menus.

2. 2

   Click create a new menu, give it a name and click Create Menu.

3. 3

   Add pages, posts, categories or custom links from the left. Drag an item slightly to the right, under another, to make it a sub-item: it will open in that item's dropdown.

4. 4

   Click Save Menu.

You don't need to assign the menu to a theme location; the widget picks it by name. To put a small badge on an item, open Screen Options at the top of the Menus screen, tick CSS Classes, and give the item the class new, hot, updated or coming-soon: the bar shows “NEW”, “HOT”, “UPDATED” or “SOON” on it.

Add the Navbar Widget

Navbar works on any page, and in a header template:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Navbar. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Until you choose a menu, the editor shows the hint “Choose a menu under Nav Menu > Select Menu.” and visitors see nothing.

Nav Menu

Open the widget and go to Content → Nav Menu:

1. 1

   Select Menu: The WordPress menu to show.

2. 2

   Alignment: PRO. Left, center or right placement of the bar, per screen size.

3. 3

   Offset: Shifts the whole bar left or right, from -150px to 150px, per screen size.

4. 4

   Padding: The space inside each top-level link, per screen size.

5. 5

   Menu Height: PRO. The minimum height of the top-level links, 20px to 150px.

6. 6

   Parent Indicator: PRO. Adds a small arrow to items that have sub-items: pointing down in the bar (it flips while the dropdown is open) and right in the dropdowns.

7. 7

   Auto Hiding Menu: On tablets and phones (screens up to 1024px wide), keeps the menu on one line that visitors swipe sideways, with faded edges hinting that it scrolls. Without it, the items wrap onto more lines on phones.

Dropdown

Content → Dropdown shapes the submenus:

1. 1

   Dropdown Alignment: Lines the dropdown up with the left edge (the default), the center or the right edge of its parent item.

2. 2

   Item Alignment: Left, center or right text in the dropdown.

3. 3

   Dropdown Padding: The space inside the dropdown panel.

4. 4

   Dropdown Width: PRO. The panel's width, 150px to 350px. It is 220px by default.

A sub-item that has sub-items of its own opens a further dropdown beside its row on large screens, and opens in place, indented, on screens narrower than 960px.

Additional Options

Content → Additional Options times the dropdowns, in milliseconds:

1. 1

   Delay Show: How long the pointer must rest on an item before its dropdown opens. 0 by default.

2. 2

   Delay Hide: How long a dropdown stays open after the pointer leaves it: 800 by default.

3. 3

   Dropdown Duration: How long the dropdown's opening animation takes: 200 by default.

4. 4

   Dropdown Offset: The gap between the bar and the dropdown, 0 to 200px.

Style the Navbar

Everything below is on the Style tab:

• Navbar — Navbar Style (PRO) adds a line to the hovered and current item: Style 1 above it, Style 2 below it, Style 3 a soft highlight behind the text, Style 4 an underline that grows from the left. The Normal, Hover and Active tabs set the top-level links' color, background, border, border radius and typography, plus Column Gap and Row Gap between items, the Style Color of the line, the Parent Indicator Color and the Auto Hiding Menu Shadow color of the faded edges.
• Individual Menu Style (PRO) — a switch at the end of the Navbar section that opens the Individual Menu Item section. Each row there colors one top-level item: row one the first item, row two the second, and so on, or the item at Menu Number when you turn on Selective Menu. A row sets the item's color, background color and border color, with a Hover tab.
• Dropdown — the panel's background, border, border radius and shadow, and the dropdown links' color, background, gap, padding, border, border radius, typography and parent indicator color in Normal, Hover and Active states.

Active styles the item of the page being viewed and, in the bar, the parent items above it.