Dear Support!
I would like to assign a different menu to the hamburger than the “standard” main menu? How would that work? And where can I style the design? For example add the Login shortcode instead of the “Search” function?? (See screenshot for the menu I mean)
Thank you in advance for your help!
Hi,
The mobile hamburger menu can be change only if you are using a cloud header -> https://i.imgur.com/SfVVTCf.png, from tagDiv Cloud Library, this can be edited with tagDiv Composer like this -> https://i.imgur.com/HGzuhUG.png -> https://i.imgur.com/XqwdZiv.png -> https://i.imgur.com/75t3WiS.png -> https://i.imgur.com/SGOJb4l.png, also these settings will be overwrite if you are using the mobile theme plugin.
The login modal on mobile is display in the mobile menu -> https://i.imgur.com/RWpnXPs.png also you can add it by editing the cloud header with tagDiv Composer and add the header login element (use the right click on the search to remove it) -> https://i.imgur.com/kkOr8Zr.png
Hope this will help you!
Thank you!
Thank you Calin for your quick response and support!
If you don’t mind, I would like to go a little deeper into my problem – and maybe important for you to know, I’m very good with all the technical issues involved here, so I’m not afraid of very advanced and creative solutions ;-))) that you maybe can suggest:
Here is a test page I created for you to see, what I’m talking about: https://fm.lujong.org/menutest/
So, my real problem here is actually the “language selector”! Which means, I tested two scenarios:
Scenario 1 – without cloud header (our favourite):
We keep the regular Main Nav and just on the phone viewport we switch to the Hamburger menu! But there is no Shortcode for the “language selector” since its not a tagDiv selector!
This I figured out, I added a polylang function to functions.php and put the according Shortcode into a textcolumn within the header. So far so good (you see what I mean when you reduce your browser size to phone viewport). Its not yet styled, but its working.
Better solution 1 for this: The much easier and cooler way would be to replace the search symbol in your header with my Polylang shortcode since we don’t need the search function.
Better solution 2 for this: If your Hamburger in this Scenario could have its own menu, I could put the language selector in this new menu (which I already created)! But your hamburger doesn’t take it, although I can select it in the composer when clicking on the Hamburger).
Scenario 2 – with cloud header:
I really really tried within a new cloud header template, to get the main menu to look as cool as it does without using a cloud template (as seen in the desktop viewport here: https://fm.lujong.org/menutest/)!
For comparison I have created a copy of the same test page with my cloud header template: https://fm.lujong.org/menutest2/
Styling wise, do you think I can really match the non cloud template menu version?
But, yet the bigger problem is: its not taking the Hamburger setting to the phone viewport! It works in the cloud template composer view, but when added to the page, the header is not showing any Hamburger in the phone viewport!!
Your help is greatly appreciated!! THANK YOU IN ADVANCE!
Hi,
First please update the theme from Newspaper 10.1 to10.3.1 in the version that you are using were some bugs.
Scenario 1 can be achieve how you need if you make some changes in theme file to replace the search icon with your code for language selector, for this you need to edit these 4 files wp-content/plugins/td-standard-pack/Newspaper/parts/header/header-menu.php, header-menu-2.php, header-menu-h1.php and header-menu-h1-2.php and the link with this id td-header-search-button-mob need to be replace with your code -> https://i.imgur.com/yXBeq6k.png
Scenario 2 if you are using a cloud header, you can edit it with tagDiv Composer and you can change on mobile the menu from here -> https://i.imgur.com/2euHyiE.png also is possible that in the version that you have now to be some problems with these options. Also you can import the cloud header you are using, header style 8 -> https://i.imgur.com/dLWoAp4.png results after editing the menu with tagDiv Composer -> https://i.imgur.com/GPeUatJ.png -> https://i.imgur.com/ZijsZtf.png -> https://i.imgur.com/sDQHYV8.png
Hope this will help you!
Thank you!
Thank you again, Calin! I will look into your suggestions right away! This is what I call a perfect customer support!
Hi,
Please let me know the results, if you have some problems, just let me know!
Have a nice day!
Dear Calin!
Thank you again for your help and sorry for the late response. Corona has brought everything down. But we are back in business and I have now tried your Solution No.1:
I have managed to add our “language selector” instead of your “search icon” in the mobile version (for test purposes I only changed it in the “header-menu.php”, the others I would change once it works).
So far so good: https://fm.lujong.org/
If you resize it to mobile, you will see the language selector and it works! The only thing I can’t get rid off is, if you click on the selector it still opens the “search background”!
I have found the jQuery for “#td-header-search-button-mob” in “tagdiv-theme.js” and “tagdiv-theme.min.js”! I commented everything within the functions out but its still not working, it still shows the “search background” on click!
Please help, am I thinking too complicated here??
I have added two screenshots for you:
https://www.dropbox.com/s/abav65tinzj6407/header-menu-php.png?dl=0
https://www.dropbox.com/s/17ejjsack5vhkgi/tagdiv-theme-js.png?dl=0
Hi,
All you need to do to fix this is to replace this code -> https://i.imgur.com/2xcWcze.png with your code and then the search will no longer open.
Thank you!
Hi Calin!
Thank you for your quick response. But whatever I try, it won’t work! Whenever I replace the code you suggested with anything that doesn’t have your id=”td-header-search-button-mob”, this new content will also show in all other sizes of the website. If I leave this id in there, it works, but then the search button is still working whenever I click the language selector.
Screenshots Situation 1 (with id=”td-header-search-button-mob”):
https://www.dropbox.com/s/owk3yj37zpn62h6/SC1_id%3Dtd-header-search-button-mob.png?dl=0
https://www.dropbox.com/s/6ul33oe987z9q2q/SC2_id%3Dtd-header-search-button-mob.png?dl=0
https://www.dropbox.com/s/wsihi79rfgkpl7b/SC3_id%3Dtd-header-search-button-mob.png?dl=0
Screenshots Situation 2 (with id=””):
https://www.dropbox.com/s/suj5vpx8quuwhjw/SC1_id%3Dnone.png?dl=0
https://www.dropbox.com/s/oe34s1ry98s6qkz/SC2_id%3Dnone.png?dl=0
https://www.dropbox.com/s/e4crjel7m9rugwv/SC3_id%3Dnone.png?dl=0
I have done so much web developement in my life, but here I’m not getting results. I really don’t know why. That said, thank you again for your patience and help!!!
It seems like such a small problem …
You can see it currently and live here: https://fm.lujong.org
(I left the version without id=”td-header-search-button-mob” online for you to check).
Hi,
That is because on that class was set an extra css, and removing the class will remove the css too, but you can use a custom css for this, for example, please set this custom css
.header-search .polylang-flags {
display: none;
}
in theme panel> custom code> custom css
and this css
.td-header-menu-wrap .header-search .polylang-flags {
display: block;
margin-right: 20px;
}
in theme panel> custom code> advance css> phones.
The above codes should remove the button from desktop, but display it on mobile.
Hope this will help you!
Thank you!
Dear Calin!
Thank you sooo much! It does work now! As I said before, this is perfect support, this is what support and help needs to look like. Again, thank you for being so patient.
Hannes
Thank you for your kind words!
If you have other questions, just let us know!
Have a nice day!
