Create the perfect navigation bar for your website. Want to keep it simple, create lists of items or bedazzle the audience with a Mega Menu to die for? Newspaper Theme is here to help you out and make everything easier.
Header Main Menu ‘How to’ & ‘What ifs’
Open the tagDiv Composer on any page of your website. It can be blank or already constructed and designed. Click the new Header Manager button (hint: it’s orange!). If you’ve already created a Header Logo & Live Search, then the functions of the Header Manager should be nothing new to you. However, to find out more about the big new feature head here.
Are you ready to meet the new Newspaper Theme 9.5 header builder? Import an already crafted Header Template from the Cloud Library. Now, take a look at the beautiful Menu widget. Click it, and inspect its settings further to get accustomed to it.
In the General Settings tab, right at the top, select your Menu. However, first, make sure you already have a Menu created precisely for the page you’re editing. Let’s get started!
Header Main Menu Widget
In the WordPress Admin Dashboard, hover over Appearance and click the Menus page. Now, on the left, you have all of your Pages, Categories, and Posts, while on the right, you can see your current Menu Structure.
Click on Create a new Menu at the top. Give it a name and then press the Create Menu button. Now, choose which item you want for your menu. Keep in mind the Header Menu should contain only the essential navigational elements. So, don’t clutter it. You can start by adding the Homepage link, then Categories, important Pages and finish with the Contact page.
List Menu, Mega Menu, Mega Menu with Sub-Categories
If you need to display more items in the navigation bar, you can easily create a Sub-Menu. Let me show you how to do that! Add a general item, such as Categories. Now, drag and drop the other elements underneath it to create submenu items. This way they become linked to the general item (in our case Categories).
For Mega Menu with subcategories, you need to have a parent Category with multiple other child categories. You can do this easily by going to Posts, then Categories. Hover over any Category then click Edit. From the Parent Category drop-down menu, choose its parent. Now, save your changes.
Go back to Appearance > Menus. Add the parent category to your new menu and then click the small arrow to the right to open its tab. Under the ‘Make this a Category Mega Menu,’ choose the Parent Category again.
To create a Mega Menu element without subcategories list, you can follow the same steps. Add the Category to the menu, then open its tab using the small arrow and choose the same item in the ‘Make this a Category Mega Menu.’ Great! Save your menu.
Customize & Design the Header Main Menu
Why don’t we build a menu from scratch? Open the tagDiv Composer on your page, import a Blank Header Template from the Cloud Library. Then drag the Header Main Menu element to your Header section.
In the General Settings, select the Menu you’ve just created. The next 3 options are referring to MegaMenu with SubCategories item, Mega Menu item or SubMenu. They can be enabled one by one to see how each one looks. However, do not enable all 3 options together, because they stack on top of each other. Enable them one by one as you design and edit them.
Scroll down to access the Main Menu and Sub-Menu sections. Each one brings you options that allow you to customize the Links from the Menu.
Mega Menu Customization Details
Open the Mega Menu tab and look through its settings. The ‘Container Width’ affects the size of your Mega Menu. To get the desired layout, you can also modify the next few options.
The Subcategories section refers to Items in your menu that are Parent Categories and have been enabled as Mega Menu elements. Change the padding of the list, the width, the elements’ space, and many more to get the best results. You should do this with the ‘Show mm. with subcats’ in the tagDiv Composer enabled, so that you can see the adjustments happening live.
In the ‘Mega Menu Module’, you can change how Posts and Articles appear within the box. There are options for Article Featured Images and the Meta Info, too.
From Article Title, Excerpt, Category tag, Author name and Photo, choose what looks best with the rest of your Header and website. Hide or Show different elements and modify their size and alignment.
Styling your Header Main Menu
Click on the Style tab to choose colors and fonts for each part of your navigation bar. Start with the Main Menu section, select the text color and hover animation for it. Decide what fonts work best with the rest of your website and website’s core intention. Check out more about picking the best fonts here.
Up next is the Sub-Menu. You can style the menu elements by deciding on a hover animation, colors, and fonts for them. All of these changes affect the List menu items you’ve added in the WordPress ‘Menus Page’.
The following two sections refer to the Mega Menu and its elements. Add shadows to the meta info or the subcategories to make them stand out from the rest of the box. Also, just like before you can select colors and fonts for each option to go with your style. If you want your Menu to appear on top of your content, you can turn the Header into an Overlay Header by going into the Zone Settings and choosing from the “Display” drop-down menu the “Overlay” option. Read more about the Overlay Header here.
Bonus: the Header Categories List
For a more minimalistic design, you can create a Header Categories List. It’s an icon and, on hover, it displays a list of your site’s Categories. Drag and drop the Header Categories List onto the Header to see precisely what this means.
You can customize it easily. Click it and go to the General Settings. Each of your Categories has a unique ID. With this shortcode, you can exclude or include different ones. You can find out the ID either from:
- Posts > Categories page – hover over the Category and look at the bottom of the screen where the word ID appears;
- Appearance > Menus – Click on the arrow and look through the Mega Menu dropdown list, and you can see the ID for each of your Categories.
Now, back to the tagDiv Composer. After picking out the IDs for the items, you wish to display, add them in the ‘Include’ box of the General Settings. Each one has to be separated by a comma.
To increase the size of your list, type a higher number in the ‘Limit’ box. Now, you can continue editing and designing the element to your heart’s desire. Add padding, margins, choose fonts, and colors! Don’t forget to save your progress.
With Newspaper Theme, you can easily create the perfect navigational Menu for your audience. Add separators, contrasting colors, paddings, and margins without effort. Arrange the perfect menu straight from your WordPress Admin Dashboard and select it from the front-end editor, the tagDiv Composer. For best results, keep the style of your Header in tone with the rest of your content so that it creates a perfect transition from the top of the page to the bottom.
And, as always, show off your brilliant Menus in the comment box below!