Hey, i’m trying to remove the top header menu from the desktop version ONLY (and keep using it on mobile) but it just won’t go, i’ve tried every css i found online with no success, please help!!
i’m showing the top header menu on mobile (and i’d like to keep doing so) using the following CSS:
@media (max-width: 767px){
.td-header-top-menu-full,
.td-header-sp-top-menu {
display: block!important;
text-align: center;
}}
Hi,
Please provide me a link to your website in this way I will be able to provide you a custom css that will hide the menu on desktop and display on mobile.
Thank you!
Hi again, it’s a working progress but head over to new.townx.com
Hi,
Please try this custom css -> http://prntscr.com/pvrw9n -> http://prntscr.com/pvrvt0
.td-header-top-menu-full,
.td-header-sp-top-menu {
display: none!important;
}
@media (max-width: 767px){
.td-header-top-menu-full,
.td-header-sp-top-menu {
display: block!important;
text-align: center;
}}
The code need to be set in theme panel> custom code> custom css
Thank you!
Thanks so much Calvin, you did it!!
1) Is there any way I could align the top (mobile) menu to the left?
It’s currently aligned in the centre but changing this little snippet from ‘text-align: center;’ to ‘text-align: left;’ doesn’t seem to do anything..
2) Also, why is it that the submenu is little left from the parent menu on the main header menu? When I point at the ‘PROPERTY MANAGEMENT v’ for instance, the submenu background along with the submenu items (Easy18, Easy19, East40 > etc) is misaligned to the left from PROPERTY MANAGEMENT. And when I point at ‘East 40 >’, the submenu disappears to the left of the screen entirely.
Why is that and how do I fix that?
3) And while we’re on the topic of menus, is it possible to highlight certain menu items (on both top header and main header menus or indeed on submenus) in any way such as by changing their colour, weight or adding an outline of some sort?
For instance, if we introduce new features of our website or new products, we will want to draw the visitors’ attention to it by highlighting them in red or making them bold for example: HOME____PROPERTY DEVELOPMENT____PROPERTY LETTINGS
4) And the last problem that I have with the menus is actually to do with loading a page in the menu by adding a page ID.
Every time a user (unintentionally) hovers over that specific menu item (e.g. ‘PAGE LOAD v’ menu item on new.townx.com), the page that is loaded occupies the entire homepage and it’s impossible for them to make it go away unless they point the cursor at the very edge of the page. It’s very confusing.
Is there any chance I could load a page in the submenu’s little window of the mega menu that usually display blogposts (PROPERTY DEVELOPMENT – EAST40 > the blank window to the right) and not across the entire homepage?
And also is that possible on the homepage? I.e. when the users click on any blogpost on the homepage, can the website take them to any other webpage rather than a post page? I ended up using a redirect plugin for the ‘Brochures section’ of the homepage sidebar but it doesn’t seem to open in a new window like I wanted so I am wondering if pages could be presented as posts on the homepage.
Thanks again, I appreciate all your help!
Hi,
1. Is look that you mange to set the top menu to the left on mobile -> http://prntscr.com/pwavjr
2. For me this is look that is work correctly, you just need to click on the arrow -> https://www.screencast.com/t/8i2PRPHiXy because you have set a link on “PROPERTY DEVELOPMENT” so by clicking on the “PROPERTY DEVELOPMENT” you’ll be redirect to that link -> http://prntscr.com/pwaxyq
3. Only the normal menu can be highlight, the mega menu can not be highlight, also this can be done only on desktop.
4. Unfortunately this is the was that page menu is working, the page menu can not be set in a sub-menu sorry!
I think that you are referring to the blocks, these can display post and pages http://prntscr.com/pwcufi -> https://forum.tagdiv.com/block-settings-guide/ if you want to link something, you can set some images or buttons or call to action elements and set the links -> http://prntscr.com/pwcv61 -> http://prntscr.com/pwcvh1
Thank you!
Thanks so much for such a prompt reply!
1) Oh! That actually worked, thnx
2) This is what it looks like when i hover over ‘PROPERTY DEVELOPMENT v’: https://www.screencast.com/t/ArHNcccT – as you can see the submenu is not exactly underneath the parent menu item
and this is what it looks like when i hover over ‘East40 >’ in ‘PROPERTY DEVELOPMENT v’: https://www.screencast.com/t/xDuxQwn0p8x – clearly something is definitely wrong – it moves all the way to the left of the homepage
Maybe it’s to do with the fact that the ‘PROPERTY MANAGEMENT’ main menu item is not mega menu while the EAST40 submenu item IS a mega menu?
3 & 4) got it, thnx anyway!
Will use the blocks then thnx a lot!
Hi,
The East40 is a mega menu that is set in a submenu, please notice that this is not the right way, please make sure that your mega menu is not set in submenu.
Mega menu -> https://forum.tagdiv.com/mega-menu/
Main menu -> https://forum.tagdiv.com/main-menu/
The sub-menu can be align under the menu using this custom css
http://prntscr.com/pws2em
.sf-menu > li.td-normal-menu > ul.sub-menu {
left: 0;
}
The code need to be set in theme panel> Custom code> Custom css
Thank you!
thanks very much Calin, it worked like a charm!
i’ve got two more questions on menus
1) the first question is on the mobile burger (main) menu: when our visitors click on ‘Property Development >’ they want to expand the submenu items but instead they’re taken to all blogposts in the selected category because they never click on the arrow icon like they’re supposed to.
i’ve got an idea on how to solve that but i’ll need your help on providing a css code for that please: i want the ‘property development >’ menu item to always be active by default (i.e. always have the submenu expanded when visitors click on the burger menu or any other menu items). is that possible? it would look like so:
PROPERTY DEVELOPMENT v
___Easy18
___Easy19
___East40
___Island32
NEWS
CONTACT
2) and the other question is on the burger menu animation, because it’s not always smooth it looks like a glitch and i was requested to remove the first part of the animation build completely. how do i do that?
currently the page scales down (zooms out) and the main menu gradient overlay moves in. i would like to keep the menu moving in as it is (from left to right) but want to remove the scaling down effect of the page behind it. is that possible?
thnx in advance!
Hi,
1. A code or this will be quite difficulty to achieve, please try this custom js
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
$( ".menu-item-has-children" ).addClass( "td-sub-menu-open" );
});
</script>
The code need to be set in Theme panel> Analytics -> http://prntscr.com/pymcng
2. In order to remove that effect you’ll need to set this custom css in Theme panel> Custom code> Advance css> Phones
.td-menu-mob-open-menu #td-outer-wrap {
transform: none;
}
Hope this will help you!
Thank you!
You’re amazing Calin! Thanks so much I really do appreciate your help!
*SOLVED*
Hi again, was just looking through the website and I realised that all of my rev slider images were replaced by a black screen with the following message:
You have some jquery.js library include that comes after the revolution files js include.
This includes make eliminates the revolution slider libraries, and make it not work.
To fix it you can:
1. In the Slider Settings -> Troubleshooting set option: Put JS Includes To Body option to true.
2. Find the double jquery.js include and remove it.”
Option 1 worked for me. Thanks again! The good thing is that I have about 20 rev sliders on my website with around 100 images and toggling that JS Includes option ON on a single one would fix all the remaining sliders on the same page. Phew!
Sorry, something else went wrong and I think it was either because I toggled that JS Includes To Body option to true or a line of js/css code is being funny because now my header background is gone on desktop: https://prnt.sc/pytrdq
And this is what I’m supposed to see: https://prnt.sc/pytrj5
Any idea why that might be happening? I had temporarily disabled all custom codes but that didn’t resolve the issue. I also reuploaded the pattern but it didn’t show up. I emptied caches, and tried private/incognito modes on different browser with no success.
It could be because of the JS Includes To Body option but if I disable it, all hundred of my images will disappear. Is there any way around the issue?
Hi,
I’m not sure, is possible that this script to interfere with other similar scripts
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
$( ".menu-item-has-children" ).addClass( "td-sub-menu-open" );
});
</script>
But removing it and clear all cache from website and host should solved the problem.
also the background color can not be change from that code from what I can see the link for that image is not longer working, is possible that the image to not longer exist or to have other name -> http://prntscr.com/pyzfgs -> http://prntscr.com/pyzfoi
Usually this can be a plugin conflict, please deactivate ALL plugins except tagDiv ones, also if you are using child theme or cache plugin, deactivate them, clear all cache and try again.
Thank you!
SOLVED IT. SORRY. That was not a header background, it was the ‘background’ option under the ‘misk’ thing in the theme panel. That was quite silly of me haha. Thanks anyway, it works now!!
————————–
You were right Calin, it wasn’t causing the issue.
I just deleted all custom code, turned off the ‘JS to body option’ on all of my Rev sliders, reuploaded the pattern again, deactivated all plugins apart from the Tagdiv ones, cleared caches on all browsers and tried it in incognito/private modes on two browsers and two different computers and the pattern never showed up all the same: https://www.screencast.com/t/Cxw9m214Res
I can only see the pattern when I am logged into WordPress: https://www.screencast.com/t/EVed1Tfz
Please help me fix this, the website looks plain without the header background pattern.
Ps: I had to restore all custom code and activate the plugins for the comfort of our visitors.
Hello !
Please contact us via email at contact@tagdiv.com and provide the following:
– admin url and credentials
– cPanel url and credentials
– A link to this topic in order to identify you
Our team will take a look !
Thank you !
