Make sure the image URL is select for the "LINK" field of the Dynamic Content item of the "Grid":
GRID > Content > ITEMS > [Articles] > Content > LINK > Dynamic > Article: Intro Image.

Then edit the "Grid" itself, click on the tab "Settings" and apply the following:
LIGHTBOX > Lightbox:  Enable lightbox gallery.
PANEL > Link:  Link panel.

Optionally remove the content from the field Settings > LINK > Text — unless you want to get a button.

Layout / Header / Dropdown

Turn on Dropdown full width submenus

But... Untick Align to navbar or all the items will line up on the left of the page.

You can adjust the megamenu to spread larger menus across the page.

 YOOtheme / Menus / 

Set up megamenus by clicking on the menu you want to upgrade and then the builder button beside the item

Width of the dropdown inside the dropbar!!!

Go to Customizer > Menus > [Menu] click on the name of the parent item (not on the "Builder" button), and select Dropdown Stretch: Navbar or Dropdown Stretch: Navbar Container.

Menus / Main Menu / choose your menu item / Nav / Settings / Grid

Changes the number of columns you want for your drop down.

Add the following css to advanced for the overlay

.el-overlay { justify-content: center; }
.el-overlay > * { flex: 0; }

 https://webcode.tools/css-generator/drop-shadow

.el-section {
filter: drop-shadow(6px 13px 11px #000000);
}

https://yootheme.com/support/yootheme-pro/joomla/widgets-and-modules#module-positions

To style the toolbars,

Open the Customizer, and select LAYOUT > Site > Toolbar: X-Large.

Navigate to YOOtheme > SETTINGS > Custom Code > CSS/LESS, and add the following to it:

.uk-navbar-dropdown-nav li > a {
justify-content: center;
}

Navigate to YOOtheme > SETTINGS > Custom Code and into the field "CSS/LESS" insert the following CSS:

#tm-dialog-mobile .uk-close svg {
width: 30px;
height: auto;
}

Adjust the size according to your requirements.

Go to the item you want to link to.

Create a text box or highlight some text you want to link to. You do not need text to create an anchor point.

Click to open JCE editor then click on the anchor icon a pop up will open.

Fill in the appropriate name/description of the anchor point and insert an anchor icon will appear in the content. 

Go to the place or page where you want the link to be accessed come from.

Create a button or text, then link it by adding the full url to the linked page. The final piece of the link should be the name of the anchor point with a # in front of it.

Save and Test the link

.btn-dark, .btn-secondary, .uk-button-secondary {

width:250px;

}

Navigate to YOOtheme > SETTINGS > Custom Code > CSS/LESS, and add the following to it:

 /*Force toolbar (Top area above header) to show on small screens*/
@media(max-width:  @breakpoint-medium) {
    .tm-toolbar.uk-visible\@m {
    display: block !important;
    }
    .tm-page {
    display: flex;
    flex-direction: column;
    }
    .tm-toolbar {
    order: -1;
    }
}