- NewspaperThe Newspaper Mobile Theme: Introduction
- NewspaperThe Mobile Theme
- NewspaperMain Menu
- NewspaperHow to Add a Logo in Newspaper
- NewspaperBig Grid Flex Settings
- NewspaperHeader Builder
- NewspaperFont Customization
- NewspaperTheme Colors Introduction
- NewspaperBackground Introduction
- NewspaperHow to Install Newspaper via FTP
- NewspaperHow to Install Newspaper via WordPress
Our site uses the hamburger icon for the mobile view and we would like to add a search field as an option once the menu is opened like in this image
I have not been able to find this in the documentation.
Hi,
If this situation is only for a few iPhones models, then it can be something related to the iOS. What I can recommend is to check if you try multiple times, the menu is not opening after the 2-4 try? without refreshing the page?
Now what I see is when you are using the mobile and try the mobile menu there is a time when the page is not full loaded, so is possible to be the problem for the menu that is not opening. There seems to be a footer image that has been deleted from media, but this is still apply on footer template – https://i.imgur.com/ewWSx5T.png please edit the homepage using tagDiv Composer – https://i.imgur.com/wCYDFr0.jpeg scroll down to footer zone and select the row then check the css tab – https://i.imgur.com/bZMp7Lj.png and click on remove image – https://i.imgur.com/yy9T4Jy.png this should help you to increase the website load with a second.
Another suggestion is to make sure that under the theme panel > header > mobile header the show mobile menu and search are enabled – https://i.imgur.com/V4D9gDG.png
Also, suggestion is to try when you are logged in and see if the problem is still persisting or not, if the problem is resolved when you are logged on the website, it can be related to the cache settings from the website.
Thank you!
Hello Alessandro!
I’ve checked your website, and it seems to work well, but you do not have a background color or image. Here you can remove/set a picture for mobile menu background: https://www.screencast.com/t/x3Xrln2b88x
And the background color here: https://www.screencast.com/t/PbU3hQpDqHh
The opacity of the mobile modal can be changed from Theme panel -> Background -> Mobile menu/search background: https://www.screencast.com/t/hcRoHastuO -> https://www.screencast.com/t/SQapAaaiLRwY
You can also use a modal popup for a mobile menu and create your own design on a separate page that displays in a modal: https://forum.tagdiv.com/modal-popup/
Thank you!
On my website, the hamburger menu doesn’t work on the mobile version, but only on iPhone.
I’ve noticed that it works fine on Android smartphones. I’ve tried many things: I cleared the browser caches, the SiteGround cache… but nothing changed.
Wordpress version: 6.8.1
Newspaper version: 12.7.1
The site is: http://www.imuc.it
Could you kindly help me?
Thanks, Alessandro.
Hello. Thank you for your hard work.
BlockChain PRO pre-built theme (including content) has been successfully installed.
After that, the first section of the homepage works normally on large screens. However, on mobile (small screens), there is an issue where the pages overlap behind the menu, or the screen is cut off and overlaps again after a little manipulation.
It seems that the basic settings such as height are different from the example (sample) theme. Please let me know what to do.
* Use the latest version of Chrome browser on desktops (PCs).
* Use iPhone and Chrome browser on mobile devices.
* Please refer to the attached My site, video, and images.
https://xn--9y2bv4wp6fc6a.com/
https://drive.google.com/file/d/1lcgFSIo5L_JNHBdKAO_Gw_bWuz_Gb-FY/view?usp=sharing
https://drive.google.com/file/d/1jJrQVtfd8GlkpnKmr8tAn1jsHQJ0tAPT/view?usp=sharing
Hi,
Glad it works.
For mobile you could create a new menu, and create sub-menus to replicate this menu from desktop https://prnt.sc/sYKNIZR_1RPO But the thing is that a different menu for mobile can only be set if the mobile theme is active https://tagdiv.com/mobile-theme-get-mobile-ready-with-newsmag-theme/ like this https://imgur.com/b8zNx4T I see no other way unfortunately.
The Newsmag theme doesn’t have the same capabilities as our Newspaper theme. With the Newspaper theme you could have created a popup and use it instead of the mobile menu, and in the popup you could have displayed anything you wanted. Newsmag however doesn’t have such options.
Thank you!
Hi Simion,
Thanks very much! it works! Now I just need to have the sub-menus works on Mobile then that would be perfect! Any suggestion?
https://consciousliving.net.au
Seedprod plugin: We used this plugin to hide the live site behind a “coming soon” message while building the website using Newspaper Pro Theme. The image has somehow become embedded in code and is showing up when we open every page on the live site before showing the actual page. We have tried all troubleshooting strategies, and our webmaster has suggested that we contact you as he could not find the code. It shows up on all devices – desktop, mobile, and tablet. This plugin has been deleted from our site.
You will see the issue when you click on the link https://consciousliving.net.au and when you click on any menu tab or article link.
Thanks Patricia Hamilton
The page is slow to load, but seems fine on my side. This is the problem on mobile devices: https://i.postimg.cc/xdpGSL42/MENU.jpg. It is not a pop up.
darrenpriest.ie is getting to a point that I am quite happy with, but I have a problem. The menu sandwich on a mobile device shows a menu I cannot edit. It has the same pages as the website menu but also has Quick Access and Courses as Headers as well as a See Pricing button. I have looked all over but cannot find a way to edit this. Please help.
Sticky table of contents for mobile devices like sticky menu that sticks to the top of the screen. The table of content button or text can be located below it.
For example, see this page on mobile device: https://fmhy.net/adblockvpnguide
Hello!
The mega menu will show the subcategories of the category you choose from the list. You can have custom links in the menu item on your website. More about mega menu functionalities here: https://forum.tagdiv.com/mega-menu/
Check out this guide about a page mega menu: https://forum.tagdiv.com/page-menu/
Simple menu: https://forum.tagdiv.com/main-menu/
We have three options available for mobile versions that you can use:
1. Responsive version: A responsive version of your website looks similar to the desktop version. TagDiv Composer is used to edit the page. Click on the mobile viewport: https://www.screencast.com/t/XDQJedlggSB. You can see your mobile version there and edit or adjust the elements to look better.
2. Mobile pages: https://tagdiv.com/newspaper-10-3-7-update-brings-customizable-and-fast-mobile-pages
3. Mobile theme plugin: The Mobile Theme is a performance-optimized theme included in the main Newspaper theme that only loads on mobile devices. It comes with its own templates and designs for pages, posts, categories, etc., so your current templates from the desktop theme will get converted to the mobile theme layout. Please see https://forum.tagdiv.com/the-mobile-theme/ and https://forum.tagdiv.com/mobile-theme-introduction/ for more information.
A full explanation is here: https://www.youtube.com/watch?v=SpGkOnJeNZY
If you need to use mobile version 1 or 2, then you need to uninstall the Mobile Theme plugin and AMP.
Thank you!
Hello! I really need your help, because my mobile pages are getting a lot of errors and I can’t fix them. The menu looks wrong, the posts are misconfigured, it’s ugly.
I need help because that’s all we need to start advertising. We don’t want to advertise with errors. Can you help us?
Hello, how do i use the builder to design my own mega menu, not using categories? Also, how do i change the mobile menu?
Thanks.
home page is not working properly and the mobile menu also not working. i don’t need sign in option any where in my website and Main menu must be there in mobile header and desktop and the social media icons.
once i click and move to other page other than home page in the mobile its showing some other mobile header
Hello,
I noticed a slower loading of newly published articles (here is an example of an article: https://www.observatorulph.ro/emisiuni/2753171-cum-poti-avea-factura-de-curent-pe-minus-secretul-fotovoltaicelor) and a very long delay until the menu and the video embed in the article appear.
I have tested on several devices and it happens especially on iOS.
Have anyone experienced this kind of problem?
Thank you,
David Mihalache
Hi,
I tried every tip on here but on the mobile theme plugin the menu structure and search button don’t work. I cached all I can cache, I deleted all mobile pages, I disabled all plugins, but nothing works, the logo also changes color. I did all the tips your support said. Website http://www.theanimalreader.com
Please help, I’ve been trying all day.
Thank you
Hi,
I’ve implemented a modal popup on my website to display menu items, and it works perfectly across the entire site. However, I’m facing an issue specifically on pages created using the Google Web Stories plugin. When I open the web story page in the desktop or mobile instead of showing menu items in the Modal Popup it start showing Web stories.
Hi,
I’m having trouble setting up the sticky menu in the mobile template. In PC browser it works fine, but on mobile browser it doesn’t show up, although it works in TagDiv Composer. I suppose there’s some conflict, so I kindy ask you for the right place to set it.
Thanks,
Dzevad
Hello support
My website is loading 60% and i found some issue.
I use Homepage template from cloud templates menu, the Homepage template is Default PRO.
The website have been showed well on PC and Ipad (both landscape and portait) the content was showed on PC, Ipad is the same (WYSIWYG).
I have checked it on mobile the content was showed on mobile is difference.
I have created mobile page from Homepage template, the content on edit mode (TagDiv Composer) was showed well but when i see it on my mobile the content is difference.
I don’t know how to make Newspaper theme run on PC, Ipad and mobile well.
Pls help me.
Thanks
Vunt
Hello!
The settings for that menu page are located in the theme panel. The mobile page can not be edited with the tagDiv Composer or add whatever element you want. The social icons from the mobile menu come from the Theme Panel -> Social/Apis -> Social Networks -> https://i.imgur.com/kKYIECB.png. Remove/edit them as needed.
There are only a few settings for it in the theme panel. For example, you can change the color of the text in the mobile menu from the Theme panel -> Theme colors -> Mobile menu -> Text/icons color.
However, you can change the shortcode with a modal popup shortcode triggered by a button that can look like the current mobile menu. That page can also be edited with the tagDiv Composer https://app.screencast.com/d00epUU2ygyXk?conversation=sLox9iaB82db2YHmnEOrFF and customized with more than just some options from the theme panel settings.
More info about modal popup here: https://forum.tagdiv.com/modal-popup/
Thank you!
Hi,
A few years ago I created a mobile header for my website devenirbilingue.com where I inserted the Mobile Menu shortcode on the top left. I designed the mobile page that opens when someone clicks on the Mobile Menu, with a background image, social media icons, etc.
Now I need to change that page and I cannot find how to do it. When I use TagDiv Composer to design the Mobile Header, it’s OK, I can modify every elements of the header. But when I click on the Mobile Menu shortcode, the page with a kid as the image background opens as if I wasn’t in the Composer (I’m still in TagDiv Composer but I cannot select any zone or element).
Could you help me understand how to access the content of that Mobile Menu page ?
Thank you.
Removed the changes and restored original footer.php.
I’m using the Cloud template, but when I get to mobile size in TagDiv the standard page footer I believe shows up. Instead of my footer (and no mobile theme usage so all responsive) it shows the menu choice I made, and the copyright notice shows at the bottom. Attached is the screen cap, similar to dkorinchak, it shows one menu and that copyright notice which I found in the footer, and is elsewhere in includes.
I’ve installed Standard Pack, but not seeing where to turn off copyright or anything.
MY page is https://remember.org, scroll to the bottom and you can see the footer (i made it one column to accomodate Mobile from 3 columns, and it shows in all browsers except the mobile one, which I can’t change.
LMK where in Theme Panel, with Standard Pack installed, I can turn this off? Thanks!
https://drive.google.com/file/d/1pQbYtglQ-v7sKQ24041on022FOMLoC6w/view?usp=drive_link
I did some debugging, and it seems that the CSS duplication problem is related to TagDiv Composer. Below is the CSS block (after disabling inline css aggregation). I manually added a comment in the middle of the code indicating where the CSS is duplicated.
<style>
/* custom css – generated by TagDiv Composer */
.td_module_wrap .td-image-wrap:before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://www.mrw.it/wp-content/uploads/2024/08/no-thumb-300×188.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index:-1
}
.td-page-title, .td-category-title-holder .td-page-title {
font-family:Chivo
}
.td-page-content h1, .wpb_text_column h1 {
font-family:Chivo
}
.td-page-content h2, .wpb_text_column h2 {
font-family:Chivo
}
.td-page-content h3, .wpb_text_column h3 {
font-family:Chivo
}
.td-page-content h4, .wpb_text_column h4 {
font-family:Chivo
}
.td-page-content h5, .wpb_text_column h5 {
font-family:Chivo
}
.td-page-content h6, .wpb_text_column h6 {
font-family: Chivo
}
.td-scroll-up[data-style=’style2′] .td-scroll-up-tooltip {
background-color: #384764
}
.td-scroll-up[data-style=’style2′] .td-scroll-up-tt-arrow, .td-scroll-up[data-style=’style2′] .td-scroll-up-arrow {
fill:#384764
}
.td-scroll-up-progress-circle path {
stroke:#384764
}
:root {
–td_excl_label: ‘ESCLUSIVO’;
–td_theme_color: #ff6600;
–td_slider_text: rgba(255, 102, 0, 0.7);
–td_mobile_gradient_one_mob: rgba(0, 0, 0, 0.8);
–td_mobile_gradient_two_mob: rgba(0, 0, 0, 0.9);
–td_mobile_text_active_color: rgba(255, 255, 255, 0.9);
–td_default_google_font_1: “Open Sans”;
–td_default_google_font_2: “Open Sans”;
–td_login_hover_background: #f4f4f4;
–td_login_gradient_one: rgba(0, 0, 0, 0.9);
–td_login_gradient_two:rgba(0, 0, 0, 0.8)
}
.td-header-style-12 .td-header-menu-wrap-full, .td-header-style-12 .td-affix, .td-grid-style-1.td-hover-1 .td-big-grid-post:hover .td-post-category, .td-grid-style-5.td-hover-1 .td-big-grid-post:hover .td-post-category, .td_category_template_3 .td-current-sub-category, .td_category_template_8 .td-category-header .td-category a.td-current-sub-category, .td_category_template_4 .td-category-siblings .td-category a:hover, .td_block_big_grid_9.td-grid-style-1 .td-post-category, .td_block_big_grid_9.td-grid-style-5 .td-post-category, .td-grid-style-6.td-hover-1 .td-module-thumb:after, .tdm-menu-active-style5 .td-header-menu-wrap .sf-menu > .current-menu-item > a, .tdm-menu-active-style5 .td-header-menu-wrap .sf-menu > .current-menu-ancestor > a, .tdm-menu-active-style5 .td-header-menu-wrap .sf-menu > .current-category-ancestor > a, .tdm-menu-active-style5 .td-header-menu-wrap .sf-menu > li > a:hover, .tdm-menu-active-style5 .td-header-menu-wrap .sf-menu > .sfHover > a {
background-color:#ff6600
}
.td_mega_menu_sub_cats .cur-sub-cat, .td-mega-span h3 a:hover, .td_mod_mega_menu:hover .entry-title a, .header-search-wrap .result-msg a:hover, .td-header-top-menu .td-drop-down-search .td_module_wrap:hover .entry-title a, .td-header-top-menu .td-icon-search:hover, .td-header-wrap .result-msg a:hover, .top-header-menu li a:hover, .top-header-menu .current-menu-item > a, .top-header-menu .current-menu-ancestor > a, .top-header-menu .current-category-ancestor > a, .td-social-icon-wrap > a:hover, .td-header-sp-top-widget .td-social-icon-wrap a:hover, .td_mod_related_posts:hover h3 > a, .td-post-template-11 .td-related-title .td-related-left:hover, .td-post-template-11 .td-related-title .td-related-right:hover, .td-post-template-11 .td-related-title .td-cur-simple-item, .td-post-template-11 .td_block_related_posts .td-next-prev-wrap a:hover, .td-category-header .td-pulldown-category-filter-link:hover, .td-category-siblings .td-subcat-dropdown a:hover, .td-category-siblings .td-subcat-dropdown a.td-current-sub-category, .footer-text-wrap .footer-email-wrap a, .footer-social-wrap a:hover, .td_module_17 .td-read-more a:hover, .td_module_18 .td-read-more a:hover, .td_module_19 .td-post-author-name a:hover, .td-pulldown-syle-2 .td-subcat-dropdown:hover .td-subcat-more span, .td-pulldown-syle-2 .td-subcat-dropdown:hover .td-subcat-more i, .td-pulldown-syle-3 .td-subcat-dropdown:hover .td-subcat-more span, .td-pulldown-syle-3 .td-subcat-dropdown:hover .td-subcat-more i, .tdm-menu-active-style3 .tdm-header.td-header-wrap .sf-menu > .current-category-ancestor > a, .tdm-menu-active-style3 .tdm-header.td-header-wrap .sf-menu > .current-menu-ancestor > a, .tdm-menu-active-style3 .tdm-header.td-header-wrap .sf-menu > .current-menu-item > a, .tdm-menu-active-style3 .tdm-header.td-header-wrap .sf-menu > .sfHover > a, .tdm-menu-active-style3 .tdm-header.td-header-wrap .sf-menu > li > a:hover {
color:#ff6600
}
.td-mega-menu-page .wpb_content_element ul li a:hover, .td-theme-wrap .td-aj-search-results .td_module_wrap:hover .entry-title a, .td-theme-wrap .header-search-wrap .result-msg a:hover {
color:#ff6600 !important
}
.td_category_template_8 .td-category-header .td-category a.td-current-sub-category, .td_category_template_4 .td-category-siblings .td-category a:hover, .tdm-menu-active-style4 .tdm-header .sf-menu > .current-menu-item > a, .tdm-menu-active-style4 .tdm-header .sf-menu > .current-menu-ancestor > a, .tdm-menu-active-style4 .tdm-header .sf-menu > .current-category-ancestor > a, .tdm-menu-active-style4 .tdm-header .sf-menu > li > a:hover, .tdm-menu-active-style4 .tdm-header .sf-menu > .sfHover > a {
border-color:#ff6600
}
.post .td-post-header .entry-title {
font-family:Chivo
}
.td-post-content h1 {
font-family: Chivo;
font-weight:bold
}
.td-post-content h2 {
font-family: Chivo;
font-weight:600
}
.td-post-content h3 {
font-family: Chivo;
font-weight:500
}
.td-post-content h4 {
font-family: Chivo;
font-weight:500
}
.td-post-content h5 {
font-family: Chivo;
font-weight:500
}
.td-post-content h6 {
font-family: Chivo;
font-weight:500
}
.tdm-menu-btn1 .tds-button1, .tdm-menu-btn1 .tds-button6:after {
background-color:#cc5200
}
.tdm-menu-btn1 .tds-button2:before, .tdm-menu-btn1 .tds-button6:before {
border-color:#cc5200
}
.tdm-menu-btn1 .tds-button2, .tdm-menu-btn1 .tds-button2 i {
color:#cc5200
}
.tdm-menu-btn1 .tds-button3 {
-webkit-box-shadow: 0 2px 16px #cc5200;
-moz-box-shadow: 0 2px 16px #cc5200;
box-shadow:0 2px 16px #cc5200
}
.tdm-menu-btn1 .tds-button3:hover {
-webkit-box-shadow: 0 4px 26px #cc5200;
-moz-box-shadow: 0 4px 26px #cc5200;
box-shadow:0 4px 26px #cc5200
}
.tdm-menu-btn1 .tds-button7 .tdm-btn-border-top, .tdm-menu-btn1 .tds-button7 .tdm-btn-border-bottom {
background-color:#cc5200
}
.tdm-menu-btn1 .tds-button8 {
background:#cc5200
}
.tdm-menu-btn1 .tds-button1:before, .tdm-menu-btn1 .tds-button4 .tdm-button-b {
background-color:#ff6600
}
.tdm-menu-btn1 .tds-button2:hover:before, .tdm-menu-btn1 .tds-button6:hover:before {
border-color:#ff6600
}
.tdm-menu-btn1 .tdm-btn-style:hover {
color:#ff6600
}
.tdm-menu-btn1 .tds-button3:hover {
-webkit-box-shadow: 0 4px 26px #ff6600;
-moz-box-shadow: 0 4px 26px #ff6600;
box-shadow:0 4px 26px #ff6600
}
.tdm-menu-btn1 .tds-button7:hover .tdm-btn-border-top, .tdm-menu-btn1 .tds-button7:hover .tdm-btn-border-bottom {
background-color:#ff6600
}
.tdm-menu-btn1 .tds-button8:before {
background-color:#ff6600
}
.tdm-menu-btn2 .tds-button1, .tdm-menu-btn2 .tds-button6:after {
background-color:#384764
}
.tdm-menu-btn2 .tds-button2:before, .tdm-menu-btn2 .tds-button6:before {
border-color:#384764
}
.tdm-menu-btn2 .tds-button2, .tdm-menu-btn2 .tds-button2 i {
color:#384764
}
.tdm-menu-btn2 .tds-button3 {
-webkit-box-shadow: 0 2px 16px #384764;
-moz-box-shadow: 0 2px 16px #384764;
box-shadow:0 2px 16px #384764
}
.tdm-menu-btn2 .tds-button3:hover {
-webkit-box-shadow: 0 4px 26px #384764;
-moz-box-shadow: 0 4px 26px #384764;
box-shadow:0 4px 26px #384764
}
.tdm-menu-btn2 .tds-button7 .tdm-btn-border-top, .tdm-menu-btn2 .tds-button7 .tdm-btn-border-bottom {
background-color:#384764
}
.tdm-menu-btn2 .tds-button8 {
background:#384764
}
.tdm-menu-btn2 .tds-button1:before, .tdm-menu-btn2 .tds-button4 .tdm-button-b {
background-color:#336699
}
.tdm-menu-btn2 .tds-button2:hover:before, .tdm-menu-btn2 .tds-button6:hover:before {
border-color:#336699
}
.tdm-menu-btn2 .tdm-btn-style:hover {
color:#ff6600
}
.tdm-menu-btn2 .tds-button3:hover {
-webkit-box-shadow: 0 4px 26px #336699;
-moz-box-shadow: 0 4px 26px #336699;
box-shadow:0 4px 26px #336699
}
.tdm-menu-btn2 .tds-button7:hover .tdm-btn-border-top, .tdm-menu-btn2 .tds-button7:hover .tdm-btn-border-bottom {
background-color:#336699
}
.tdm-menu-btn2 .tds-button8:before {
background-color: #336699
}
/**
* The rest of the CSS is a duplicate
*/
.td_module_wrap .td-image-wrap:before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://www.mrw.it/wp-content/uploads/2024/08/no-thumb-300×188.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index:-1
}
.td-page-title, .td-category-title-holder .td-page-title {
font-family:Chivo
}
.td-page-content h1, .wpb_text_column h1 {
font-family:Chivo
}
.td-page-content h2, .wpb_text_column h2 {
font-family:Chivo
}
.td-page-content h3, .wpb_text_column h3 {
font-family:Chivo
}
.td-page-content h4, .wpb_text_column h4 {
font-family:Chivo
}
.td-page-content h5, .wpb_text_column h5 {
font-family:Chivo
}
.td-page-content h6, .wpb_text_column h6 {
font-family: Chivo
}
.td-scroll-up[data-style=’style2′] .td-scroll-up-tooltip {
background-color: #384764
}
.td-scroll-up[data-style=’style2′] .td-scroll-up-tt-arrow, .td-scroll-up[data-style=’style2′] .td-scroll-up-arrow {
fill:#384764
}
.td-scroll-up-progress-circle path {
stroke:#384764
}
:root {
–td_excl_label: ‘ESCLUSIVO’;
–td_theme_color: #ff6600;
–td_slider_text: rgba(255, 102, 0, 0.7);
–td_mobile_gradient_one_mob: rgba(0, 0, 0, 0.8);
–td_mobile_gradient_two_mob: rgba(0, 0, 0, 0.9);
–td_mobile_text_active_color: rgba(255, 255, 255, 0.9);
–td_default_google_font_1: “Open Sans”;
–td_default_google_font_2: “Open Sans”;
–td_login_hover_background: #f4f4f4;
–td_login_gradient_one: rgba(0, 0, 0, 0.9);
–td_login_gradient_two:rgba(0, 0, 0, 0.8)
}
.td-header-style-12 .td-header-menu-wrap-full, .td-header-style-12 .td-affix, .td-grid-style-1.td-hover-1 .td-big-grid-post:hover .td-post-category, .td-grid-style-5.td-hover-1 .td-big-grid-post:hover .td-post-category, .td_category_template_3 .td-current-sub-category, .td_category_template_8 .td-category-header .td-category a.td-current-sub-category, .td_category_template_4 .td-category-siblings .td-category a:hover, .td_block_big_grid_9.td-grid-style-1 .td-post-category, .td_block_big_grid_9.td-grid-style-5 .td-post-category, .td-grid-style-6.td-hover-1 .td-module-thumb:after, .tdm-menu-active-style5 .td-header-menu-wrap .sf-menu > .current-menu-item > a, .tdm-menu-active-style5 .td-header-menu-wrap .sf-menu > .current-menu-ancestor > a, .tdm-menu-active-style5 .td-header-menu-wrap .sf-menu > .current-category-ancestor > a, .tdm-menu-active-style5 .td-header-menu-wrap .sf-menu > li > a:hover, .tdm-menu-active-style5 .td-header-menu-wrap .sf-menu > .sfHover > a {
background-color:#ff6600
}
.td_mega_menu_sub_cats .cur-sub-cat, .td-mega-span h3 a:hover, .td_mod_mega_menu:hover .entry-title a, .header-search-wrap .result-msg a:hover, .td-header-top-menu .td-drop-down-search .td_module_wrap:hover .entry-title a, .td-header-top-menu .td-icon-search:hover, .td-header-wrap .result-msg a:hover, .top-header-menu li a:hover, .top-header-menu .current-menu-item > a, .top-header-menu .current-menu-ancestor > a, .top-header-menu .current-category-ancestor > a, .td-social-icon-wrap > a:hover, .td-header-sp-top-widget .td-social-icon-wrap a:hover, .td_mod_related_posts:hover h3 > a, .td-post-template-11 .td-related-title .td-related-left:hover, .td-post-template-11 .td-related-title .td-related-right:hover, .td-post-template-11 .td-related-title .td-cur-simple-item, .td-post-template-11 .td_block_related_posts .td-next-prev-wrap a:hover, .td-category-header .td-pulldown-category-filter-link:hover, .td-category-siblings .td-subcat-dropdown a:hover, .td-category-siblings .td-subcat-dropdown a.td-current-sub-category, .footer-text-wrap .footer-email-wrap a, .footer-social-wrap a:hover, .td_module_17 .td-read-more a:hover, .td_module_18 .td-read-more a:hover, .td_module_19 .td-post-author-name a:hover, .td-pulldown-syle-2 .td-subcat-dropdown:hover .td-subcat-more span, .td-pulldown-syle-2 .td-subcat-dropdown:hover .td-subcat-more i, .td-pulldown-syle-3 .td-subcat-dropdown:hover .td-subcat-more span, .td-pulldown-syle-3 .td-subcat-dropdown:hover .td-subcat-more i, .tdm-menu-active-style3 .tdm-header.td-header-wrap .sf-menu > .current-category-ancestor > a, .tdm-menu-active-style3 .tdm-header.td-header-wrap .sf-menu > .current-menu-ancestor > a, .tdm-menu-active-style3 .tdm-header.td-header-wrap .sf-menu > .current-menu-item > a, .tdm-menu-active-style3 .tdm-header.td-header-wrap .sf-menu > .sfHover > a, .tdm-menu-active-style3 .tdm-header.td-header-wrap .sf-menu > li > a:hover {
color:#ff6600
}
.td-mega-menu-page .wpb_content_element ul li a:hover, .td-theme-wrap .td-aj-search-results .td_module_wrap:hover .entry-title a, .td-theme-wrap .header-search-wrap .result-msg a:hover {
color:#ff6600 !important
}
.td_category_template_8 .td-category-header .td-category a.td-current-sub-category, .td_category_template_4 .td-category-siblings .td-category a:hover, .tdm-menu-active-style4 .tdm-header .sf-menu > .current-menu-item > a, .tdm-menu-active-style4 .tdm-header .sf-menu > .current-menu-ancestor > a, .tdm-menu-active-style4 .tdm-header .sf-menu > .current-category-ancestor > a, .tdm-menu-active-style4 .tdm-header .sf-menu > li > a:hover, .tdm-menu-active-style4 .tdm-header .sf-menu > .sfHover > a {
border-color:#ff6600
}
.post .td-post-header .entry-title {
font-family:Chivo
}
.td-post-content h1 {
font-family: Chivo;
font-weight:bold
}
.td-post-content h2 {
font-family: Chivo;
font-weight:600
}
.td-post-content h3 {
font-family: Chivo;
font-weight:500
}
.td-post-content h4 {
font-family: Chivo;
font-weight:500
}
.td-post-content h5 {
font-family: Chivo;
font-weight:500
}
.td-post-content h6 {
font-family: Chivo;
font-weight:500
}
.tdm-menu-btn1 .tds-button1, .tdm-menu-btn1 .tds-button6:after {
background-color:#cc5200
}
.tdm-menu-btn1 .tds-button2:before, .tdm-menu-btn1 .tds-button6:before {
border-color:#cc5200
}
.tdm-menu-btn1 .tds-button2, .tdm-menu-btn1 .tds-button2 i {
color:#cc5200
}
.tdm-menu-btn1 .tds-button3 {
-webkit-box-shadow: 0 2px 16px #cc5200;
-moz-box-shadow: 0 2px 16px #cc5200;
box-shadow:0 2px 16px #cc5200
}
.tdm-menu-btn1 .tds-button3:hover {
-webkit-box-shadow: 0 4px 26px #cc5200;
-moz-box-shadow: 0 4px 26px #cc5200;
box-shadow:0 4px 26px #cc5200
}
.tdm-menu-btn1 .tds-button7 .tdm-btn-border-top, .tdm-menu-btn1 .tds-button7 .tdm-btn-border-bottom {
background-color:#cc5200
}
.tdm-menu-btn1 .tds-button8 {
background:#cc5200
}
.tdm-menu-btn1 .tds-button1:before, .tdm-menu-btn1 .tds-button4 .tdm-button-b {
background-color:#ff6600
}
.tdm-menu-btn1 .tds-button2:hover:before, .tdm-menu-btn1 .tds-button6:hover:before {
border-color:#ff6600
}
.tdm-menu-btn1 .tdm-btn-style:hover {
color:#ff6600
}
.tdm-menu-btn1 .tds-button3:hover {
-webkit-box-shadow: 0 4px 26px #ff6600;
-moz-box-shadow: 0 4px 26px #ff6600;
box-shadow:0 4px 26px #ff6600
}
.tdm-menu-btn1 .tds-button7:hover .tdm-btn-border-top, .tdm-menu-btn1 .tds-button7:hover .tdm-btn-border-bottom {
background-color:#ff6600
}
.tdm-menu-btn1 .tds-button8:before {
background-color:#ff6600
}
.tdm-menu-btn2 .tds-button1, .tdm-menu-btn2 .tds-button6:after {
background-color:#384764
}
.tdm-menu-btn2 .tds-button2:before, .tdm-menu-btn2 .tds-button6:before {
border-color:#384764
}
.tdm-menu-btn2 .tds-button2, .tdm-menu-btn2 .tds-button2 i {
color:#384764
}
.tdm-menu-btn2 .tds-button3 {
-webkit-box-shadow: 0 2px 16px #384764;
-moz-box-shadow: 0 2px 16px #384764;
box-shadow:0 2px 16px #384764
}
.tdm-menu-btn2 .tds-button3:hover {
-webkit-box-shadow: 0 4px 26px #384764;
-moz-box-shadow: 0 4px 26px #384764;
box-shadow:0 4px 26px #384764
}
.tdm-menu-btn2 .tds-button7 .tdm-btn-border-top, .tdm-menu-btn2 .tds-button7 .tdm-btn-border-bottom {
background-color:#384764
}
.tdm-menu-btn2 .tds-button8 {
background:#384764
}
.tdm-menu-btn2 .tds-button1:before, .tdm-menu-btn2 .tds-button4 .tdm-button-b {
background-color:#336699
}
.tdm-menu-btn2 .tds-button2:hover:before, .tdm-menu-btn2 .tds-button6:hover:before {
border-color:#336699
}
.tdm-menu-btn2 .tdm-btn-style:hover {
color:#ff6600
}
.tdm-menu-btn2 .tds-button3:hover {
-webkit-box-shadow: 0 4px 26px #336699;
-moz-box-shadow: 0 4px 26px #336699;
box-shadow:0 4px 26px #336699
}
.tdm-menu-btn2 .tds-button7:hover .tdm-btn-border-top, .tdm-menu-btn2 .tds-button7:hover .tdm-btn-border-bottom {
background-color:#336699
}
.tdm-menu-btn2 .tds-button8:before {
background-color: #336699
}
</style>
Hello!
A workaround could be to list the submenus in the mobile version as a menu. You can build a different element with different settings in the mobile version and hide it on the desktop and tablet viewport.
The users can also see the submenus in the mobile menu in the header.
Thank you!

