Layout issues in mobile version – images overlapping text in widgets

About the image when view on the mobile, you need log into Dashboard > Settings > Media and change the thumbnail size from 150 – 150px to 110 – 110px. 
Yes, I have checked on our demo and it’s not a bug come from the theme. Currently, the DW Focus does not support to display the subcategories on the mobile while you are using the Mega Menu plugin.
About the dropdown categories on mobile, you can try the following code:

@media (max-width: 997px) {

.nav li:hover .dw-sub-menu {
 display: block;

}

.dw-sub-menu .dw_focus_widget_news_grid .post .entry-meta, .dw-sub-menu .widget_news-grid .post .entry-meta {

 display: none;

}

.nav li:hover .dw-mega-menu {

 display: block;

}

.dw-sub-menu {

 position: relative;

}

.dw-sub-menu .entry-thumbnail {

 display: none;

}

.dw-sub-menu .dw_focus_widget_news_grid .post .entry-title, .dw-sub-menu .widget_news-grid .post .entry-title {

 display:none;

}

.main-navigation .dw-mega-menu .dw-mega-menu-tabs .dw-mega-menu-tab-content {

 display: none;

}

.dw-mega-menu-tabs .dw-mega-menu-tab > a {

 width: 100%;

}

}

Hope this helps !

Hi !
 
Thanks! The image resizing now shows as properly aligned for the thumbnails. However, the sub menus are just not showing up. Is it possible to add a dropdown arrow on the side of a top level menu section which when clicked would show the sub-categories on mobile. If a user just clicks on the top level category, it merely takes the user to that category listing. There’s no easy way for a user to navigate to sub-sections from the menu right now.
 
Also, we’d like to show our logo (what we’ve currently put in the header widget) across the top of the page when viewed on desktop as well as mobile. Would it be possible to display that?
It can be handled via the logo container or the header widget container, whichever makes it simple.

To display the header section on the mobile, you can add the following code to the style.css file:

@media (max-width: 767px) {
.site-header .container .row {
    display: block !important;
   }
}

 
About the menu, you can add the following code to the style.css file to fix the issue. 
@media (max-width: 997px) {
   .nav li:hover .dw-sub-menu { 
   min-height: auto;
}
.main-navigation .dw-sub-menu>li>a {
   padding: 10px 0px; 
   width: 100%;
}
}

@media (max-width: 997px) {
.nav li:hover .dw-mega-menu {
   overflow-y: scroll;
   height: 400px;
}

.main-navigation .dw-mega-menu-full-width:before, .menu-editorial:before, .menu-contact-us:before {
   content: “\f0d7”;
   position: absolute;
   color: #111;
   font-family: fontawesome;
   right: 12px;
   top: 10px;
}

.dw-mega-menu-full-width {
   position: relative !important;
  }
}
Note: Css code only fix on your site and with current menu item. 

Hi Dominic !
 
Thank you for the quick reply and fix. The header widget is now showing on mobile devices correctly.
 
The code that you’ve sent above for the menu improvements  – do i have to replace the previous code you sent in the first answer on this page or should i place it in addition to what you previously sent? Right now, on tapping any menu which contains sub-menu entries (like FEATURES or ENTERTAINMENT or CONTACT US), instead of expanding and showing the included sub menu entries, it’s acting as if a click / tap has occurred and takes the user to the link of the top level entry.
 
Once again, thank you very much for your help and support !
 
Sparx

 Yes, Please put the new code under the older code that I sent in the previous answer, my friend. We will try to improve the mega menu on the mobile device.