Refactoring and Optimization of the Menu

Goal: Move menu management from hardcode (ACF) to standard WordPress functionality, configure correct operation of language versions (Polylang), and ensure responsiveness for 8 menu items.

1. Current State (Diagnosis)

Currently, the menu is implemented through hardcode in theme files and text output via the ACF plugin.

• File paths: wp-content/themes/theme/header.php, header-en.php, footer.php, footer-en.php.

• Logic: The text of the items is taken from the meta fields of pages with ID 7 (UA) and ID 428 (EN) using the_field('header_menu_item_X', ID).

• Problem: Any change in structure or addition of an item (for example, a new page "Qualification") requires editing PHP files. The menu is not synchronized between languages automatically.

2. Architectural Changes (Backend)

It is necessary to completely abandon the current implementation in favor of the standard WordPress toolkit.

• Menu Registration: In functions.php, register menu areas (for example, primary for header and mobile_popup for pop-up).

• Implementation of wp_nav_menu():

  • In header.php files (and language versions), replace static lists <ul> with a call to wp_nav_menu().

  • Do the same for the pop-up menu in footer.php.

• Admin Management: The menu should be fully managed through the Appearance -> Menus section.

• Language Synchronization: Set up a connection between UKR and EN menus through Polylang, so that when switching languages, the corresponding menu is automatically displayed.

• Cleanup: After migration, remove outdated ACF fields (header_menu_item_1-8) from the "Main" field group to avoid cluttering the admin panel.

3. Updated Menu Structure (8 Items)

It is necessary to create and configure a menu with the following list:

1. Home

2. Training

3. Certification

4. Qualification (New Page)

5. Services

6. FAQ

7. News

8. Contacts

4. Responsiveness and UI Optimization (Frontend)

As the number of items increases to 8, it is necessary to prevent line breaks (items dropping) on laptops.

• Testing Range: 1024px — 1440px.

• Optimization Methods:

  • Reduce padding between menu items (class .menu__item or similar).

  • Reduce font-size by 1-2px for the desktop version if the menu does not fit in one line.

  • Breakpoint: Set the transition point to "burger menu" (mobile navigation) so that the menu does not overlap the logo when the screen narrows.

5. Expected Result

1. The site owner can independently add/remove/reorder menu items through the admin panel without editing code.

2. The new item "Qualification" is correctly displayed in both language versions.

3. The menu looks cohesive (in one line) on laptop screens (13-15").

4. The code is cleaned of unnecessary ACF database queries for navigation output.