Menus & Navigation

Overview

Your PremiumPress theme uses WordPress's built-in menu system, giving you complete control over your site's navigation. You can create multiple menus for different locations (header, footer, mobile), customize menu items, and even translate them into multiple languages.

Setting Up Your Main Navigation Menu

Creating Your First Menu

1. Go to Appearance > Menus in your WordPress dashboard
2. Click Create a new menu at the top
3. Give your menu a name (e.g., "Main Menu" or "Primary Navigation")
4. Click Create Menu

Adding Pages to Your Menu

1. In the left column, you'll see available pages, posts, and custom links
2. Check the boxes next to the pages you want to add
3. Click Add to Menu
4. The pages will appear in the menu structure on the right

Arranging Menu Items

• Drag and drop items to reorder them
• Indent items by dragging them slightly to the right to create dropdown submenus
• Parent items will display an arrow and show children on hover

Assigning Menu Location

1. Scroll down to Display location (or Menu Settings)
2. Check the box for Primary Menu (or your desired location)
3. Click Save Menu

Video Tutorial: Watch how to setup your website navigation bar

Editing Text in Your Navigation

Changing Menu Item Labels

1. Go to Appearance > Menus
2. Click the arrow on any menu item to expand its settings
3. Edit the Navigation Label field
4. Change the text to whatever you want displayed
5. Click Save Menu

Using the Quick Text Editor

For faster editing across your entire site:

1. Go to PremiumPress > Text Editor
2. Search for the text you want to change
3. Type your replacement text
4. Click Update to apply changes site-wide

This is especially useful for changing text that appears in multiple places.

Video Tutorials:

• How to change text
• Quick text editor overview

Creating Dropdown Menus

Dropdown menus help organize your navigation into logical groups.

Steps to Create Dropdowns

1. Go to Appearance > Menus
2. Add all the pages you want in the dropdown
3. Drag the child pages slightly to the right under the parent page
4. You'll see the child pages indent
5. Click Save Menu

Dropdown Best Practices

• Keep dropdowns to 2 levels maximum (parent and child)
• Limit dropdown items to 5-7 per parent for readability
• Group related pages together logically
• Use descriptive parent labels

Example Structure

Services (parent)
    ├── Web Design (child)
    ├── SEO Services (child)
    └── Hosting (child)
About Us (parent)
    ├── Our Team (child)
    └── Contact (child)
        

Multi-Language Navigation Setup

If you're running a multilingual site, you'll need separate menus for each language.

Setting Up Language-Specific Menus

1. Install a translation plugin (WPML, Polylang, or TranslatePress)
2. Go to Appearance > Menus
3. Create a new menu for each language:
   • "Main Menu - English"
   • "Main Menu - Spanish"
   • "Main Menu - French"
4. Add the appropriate language pages to each menu
5. Assign each menu to the correct language location

Tips for Multilingual Menus

• Keep menu structure consistent across languages
• Translate navigation labels accurately
• Test language switching to ensure menus change properly
• Use flags or language codes in the language switcher

Video Tutorial: Setup navigation in multiple languages

Customizing the Mobile Menu

Mobile navigation is crucial since many users browse on phones and tablets.

Accessing Mobile Menu Settings

1. Go to Appearance > Customize
2. Navigate to PremiumPress > Mobile Menu (or Header > Mobile)
3. Here you can customize:
   • Mobile menu icon (hamburger style)
   • Menu colors and backgrounds
   • Animation style
   • Breakpoint (when mobile menu appears)

Mobile Menu Best Practices

• Keep mobile menus simple with fewer items
• Avoid deep dropdown nesting on mobile
• Use clear, short labels that fit on small screens
• Test on actual mobile devices, not just browser resize

Common Mobile Menu Customizations

Change Hamburger Icon Color:

• Go to Customize > PremiumPress > Mobile Menu
• Adjust Icon Color setting

Change Background Color:

• In the same section, adjust Background Color
• Consider using your brand colors

Adjust Font Size:

• Navigate to Typography settings
• Increase font size for better mobile readability

Video Tutorial: How to edit the mobile menu

Editing Footer Links

Footer navigation typically includes legal pages, social links, and important resources.

Creating a Footer Menu

1. Go to Appearance > Menus
2. Click Create a new menu
3. Name it "Footer Menu"
4. Add pages like:
   • Privacy Policy
   • Terms of Service
   • Contact Us
   • About Us
   • Sitemap
5. Check Footer Menu under Display location
6. Click Save Menu

Footer Menu Layouts

Single Row Layout:

All links in one horizontal row at the bottom

Multi-Column Layout:

Links organized into categories (Company, Support, Legal, etc.)

Social Links:

Add social media icons using Custom Links:

1. Click Custom Links
2. Enter your social media URL
3. Add descriptive text like "Facebook" or "Twitter"

Using Elementor for Advanced Footer Design

1. Go to PremiumPress > Header/Footer Builder
2. Click Edit on your footer template
3. Add a Nav Menu widget
4. Select your footer menu
5. Customize styling, colors, and layout
6. Click Update

Video Tutorial: How to edit footer links

Adding Custom Links to Menus

Sometimes you need links that aren't pages on your site.

Adding External Links

1. Go to Appearance > Menus
2. Click Custom Links in the left column
3. Enter the full URL (e.g., https://example.com)
4. Enter the link text
5. Click Add to Menu

Common Use Cases

• Link to your blog on a subdomain
• Link to external resources or partners
• Link to social media profiles
• Link to downloadable files (PDFs)
• Link to external booking or payment systems

Opening Links in New Tab

1. Expand the menu item settings
2. Check Open link in a new tab
3. This is recommended for external links

Advanced Menu Features

Adding CSS Classes to Menu Items

1. Go to Appearance > Menus
2. Click Screen Options at the top right
3. Check CSS Classes
4. Now each menu item will have a CSS Classes field
5. Add custom classes for styling (e.g., "highlight-menu", "cta-button")

Creating Call-to-Action Buttons

1. Add a menu item (e.g., "Get Started")
2. Add a CSS class like "menu-button" or "cta-button"
3. Style it in Appearance > Customize > Additional CSS:

.menu-button a {
    background: #2563eb;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}
.menu-button a:hover {
    background: #1d4ed8;
}
        

Menu Icons

Some themes support icons in menus:

1. Install a menu icon plugin (Menu Icons, Font Awesome Menu, etc.)
2. Edit your menu item
3. Select an icon from the icon picker
4. Position it before or after the text

Troubleshooting Common Menu Issues

Menu Not Showing Up

Check:

• Menu is assigned to the correct location (Primary Menu)
• Menu has items added to it
• Theme location is properly configured
• Clear cache if using a caching plugin

Dropdown Not Working

Solutions:

• Clear browser cache
• Check for JavaScript errors in browser console
• Disable plugins one by one to find conflicts
• Ensure child items are properly indented

Mobile Menu Not Responding

Fixes:

• Clear cache on mobile device
• Check hamburger icon is visible
• Test in different mobile browsers
• Verify mobile breakpoint settings

Menu Items Out of Order

Solution:

• Go to Appearance > Menus
• Drag and drop items to correct order
• Save menu and clear cache

Best Practices for Navigation

User Experience Guidelines

1. Keep it simple - 5-7 main menu items is ideal
2. Use clear labels - Avoid jargon, use familiar terms
3. Logical grouping - Related pages should be together
4. Consistent placement - Navigation in same spot on all pages
5. Visual hierarchy - Important pages more prominent

SEO Considerations

• Use descriptive anchor text
• Include important pages in main navigation
• Create a logical site structure
• Use breadcrumbs for deeper pages
• Maintain consistent internal linking

Accessibility

• Use semantic HTML (nav, ul, li tags)
• Ensure keyboard navigation works
• Add aria-labels for screen readers
• Maintain sufficient color contrast
• Test with screen reader software