Hello !
I’m using the DW Focus theme for my site: http://parsi-times.com
As can be seen from this screenshot – https://s32.postimg.org/c863mbnqt/Screenshot_20160722_210605.png
I’ve laid out the front page with widgets and the megamenu containing sub-menus of categories (and widgets).
I’m running into issues when the site is being viewed on mobile devices (both iPhone and Android – using Firefox, Chrome and Safari). This is showing up for the DW News List widget.
I would also like to know how the sub categories of the megamenu can be displayed while viewing on a mobile screen – right now only the top most menu entries are being shown.
Can this please be checked ? I’d appreciate a quick answer. Many thanks!
Sparx
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.
Please login or Register to submit your answer