Aaika theme creates residual styling, so we’ll want to use Manual Integration to prevent the theme from interfering. Manual Integration Remember to always make theme edits in a child theme to preserve them when updating The file that needs to be edited depends on which Header you choose in the theme settings The theme will show you where the template file is located: templates/header/header-{x}.php Copy the appropriate header template into the child theme in an identical directory path, e.g. aaika-child/templates/header/header-5.php Then replace the theme’s menu with UberMenu. Here’s an example from the Header 5 template: Centering Menu Once the menu is integrated, you’ll want to use the inner centering settings to center the items to your content area.

UberMenu provides a system for defining your own Menu Item Layouts and adding your own custom content programmatically, so you can extend the flexibility of UberMenu. Remember, all content defined in a menu item layout will be inside the anchor. If you want to add custom content outside the anchor, you can use Custom Content, or the ubermenu_dp_subcontent filter for Dynamic Posts. This process contains four steps: 1. Register your custom layout. This allows you to select your custom layout via the Menu Item Settings. 2. Define your custom layout. This allows you to tell UberMenu what content should be printed in what order. 3. Add custom content (optional). This allows you to provide custom content that UberMenu doesn’t already generate. 4. Style your content. Since your content will be custom, you’ll need to provide styles for it, since it is not native UberMenu functionality. Steps 1-3 are best added in your child theme’s functions.php. You should never edit the core plugin files 1. Register your custom layout In the first step, we’re going to tell UberMenu about your new layout. We’re going to call it “My Layout”. This code will add your custom layout as a selectable option in the UberMenu Menu Item Settings: You’ll see your new layout appear as an option under “My Custom Layouts” in the Layouts tab of the Menu Item Settings. To switch to this layout, you’ll select it just like a default layout. Note that we’re going to use my_layout as the ID for this custom layout. This is important as we will need to reference it later 2. Define your custom layout In this step, we define what content will appear in this layout, and in what order. You simply filter the $layouts array and add your new layout as an array […]

The Dynamic Post subcontent filter allows you to set custom content based on a specific dynamic post This filter is run for a specific Dynamic Posts item when the Dynamic Subcontent setting is set to Custom Here’s an example that prints the post date for each dynamic post (note that this is already available as a built-in option, used here simply for illustration) The ubermenu-target-description ubermenu-target-text classes style the result like an UberMenu Description, but you can add whatever markup you like and style it yourself. ubermenu_dp_subcontent Your registered callback will be called once for each post generated by a dynamic post item. The content that you return will be displayed in that post item in the menu. You have access to the current post object and the menu item’s ID to generate your content. $content This is the content to be displayed below the post title. The filter callback should return this. $post This is the post object for each returned post. $item_id This is the ID of the Dynamic Posts menu item. It can be used to conditionally apply this filter only to a specific set of dynamic posts.

Menu Item Settings > Custom Content Each standard menu item can also contain custom content (text, HTML, and shortcodes). Standard Menu Item or Custom Content Item? A standard menu item (like a Post or Page) can have custom content attached. There is also a Custom Content Advanced Menu Item. If you want a link with custom content below it, use a standard menu item. If you want a block of custom content with no link/header, use the Custom Content item. This is effectively a shortcut for adding a Link item, setting the URL to ‘#’, and disabling the Link and Text. Adding Custom Content To add custom content to a menu item: 1. Open the Menu Item Settings > Custom Content Go to Appearance > Menus and click the Uber button on the menu item to open the Menu Item Settings Panel. Click the Custom Content tab on the left. 2. Add your custom content Add your custom content in the Custom Content text area. This area can contain text, HTML, and shortcodes. It cannot contain PHP. 3. Adjust the Layout Adjust the Layout of the item in the Layout tab to set the width of the content block, if desired. 4. Save your settings Click the Save Menu Item button to save your settings.

Appearance > Menus Content is added to UberMenu through the standard WordPress Appearance > Menus screen. WordPress Codex: Adding Menu Items Creating a menu If you haven’t created a menu already, do so by giving your menu a title and clicking Create Menu Adding Menu Items To add content to your menu, use the lists of available menu items in the left column. The content on your site is organized into sections based on the content type – Posts, Pages, Custom Post Types, and Taxonomies (tags, categories, and custom taxonomies). Check the items you want to add, then click Add to Menu Please note that the menu items available to you are based on the content present on your site, so what you see on your site will be different from the menu items available in the demo tutorials, for example, which include custom post types which your site will not include by default. To reveal additional menu item types, click the Screen Options tab in the upper right of your Menus panel. To reorganize your menu items, drag and drop them into the order you want. You can assign this menu to a specific theme location (just as in the Manage Locations tab) by checking the appropriate theme location in the box below the menu items. To save your menu structure, click the Save Menu button. Adding Submenus A submenu is created any time a menu item has a child item. To assign a child item, add a menu item to your menu, then drag that menu item so that it is indented below its parent item. A submenu will automatically be generated to contain all child items of a menu item. Organize your menu into a hierarchical structure which will be transformed into a navigation menu layout. UberMenu […]

In short, no. UberMenu is a semantically hierarchical menu. That means that submenu items are actually child elements of their parent nodes in the HTML markup / DOM. In other words, the structure is like this This structure is very important because the semantics of the markup allow search engine spiders to properly index your site’s content and know how pieces of content are related to one another. In other words, this standard menu markup makes the menu SEO-friendly. As a result, submenus must be positioned absolutely (otherwise they would visually appear inside their parent items), and therefore they will not displace other items on your page. In short: UberMenu is semantically hierarchical for SEO purposes That means child item elements are actually contained within parent item elements Therefore submenus must be absolutely positioned, or else they would simply stretch the top level menu items when displayed Absolutely positioned elements are taken out of the flow of the document, and therefore cannot displace other elements on the page (they will overlap them) Since the submenus can’t displace other items on the page, the submenus cannot push down content on your site In shorter: Submenus can’t push down content because they’re absolutely positioned, which is necessary due to UberMenu’s SEO-friendly properties But I still wanna do it anyway When I say it isn’t possible to push down the content, what I mean is it isn’t possible to do so using natural HTML/CSS layouts. It’s always best to have the layout of your site be dictated by the natural flow of the elements – this is especially important with responsive content, when dimensions can change dynamically; there’s no way to accomplish it that way, so I don’t recommend it. If you’re really hell-bent on this effect, you can brute-force mimic it with […]