Headway

Headway’s built-in Navigation block creates residual styling with UberMenu. To avoid this, we’ll integrate UberMenu via the UberMenu manual integration PHP code within a Custom Code block.

1. Setup Easy Integration

To keep UberMenu independent from the Headway navigation system, we’ll use UberMenu’s special theme location.

1.1 Activate Easy Integration

Go to Appearance > UberMenu > General Settings > Advanced and activate Register Easy Integration UberMenu Theme Location. Save your changes.

1.2 Assign a menu to the new theme location

Then go to Appearance > Menus > Manage Locations and assign your menu to the UberMenu [Easy Integration] theme location. Save your changes.

2. Replace your Navigation block with a Custom Code Block

2.1 Remove the existing Navigation Block

In the Headway Visual Editor in Grid Mode, remove the Navigation Block if it already exists (assuming you want to replace it with UberMenu).

2.2 Add a new Custom Code block

Add a new block where you would like your menu to appear and set the block type to Custom Code

3. Add the UberMenu Manual Integration Code

3.1 Generate and copy the UberMenu Manual Integration PHP code

In the UberMenu Control Panel, click the Main UberMenu Configuration tab, then Integration. Under Manual Integration, select the Easy Integration theme location under Integrate Specific Theme Location

This will generate the appropriate manual integration code. Copy the PHP to your clipboard.

<?php ubermenu( 'main' , array( 'theme_location' => 'ubermenu' ) ); ?>

3.2 Add the UberMenu Code to the Custom Code block

Back in the Headway Visual Editor, click the Content button on the Custom Code block to open the text editor. Paste in the UberMenu Manual Integration Code.

Click the Save button to save your layout.

UberMenu will now appear on your site.

4. Reveal the submenus

If your submenus aren’t displaying, it is likely because Headway adds overflow:hidden to every block, which means when the submenu is extended beyond the bounds of the block, it won’t be visible. To fix this, you can add some Custom CSS – you just need to find the ID for your specific block. So if you have added UberMenu to “Custom Code Block #48”, you would need to add this CSS:

#block-48{
  overflow:visible;
}

Generically, you may be able to use

.block.block-type-custom-code{
    overflow:visible;
}

But generally, targeting just your specific block would be better.

UberMenu 3