Hi,
how can I do to display the Top Header Menu on mobile?
My header style is 12 (Top colored menu with logo)
Thanks
Hello,
The top menu was not meant to work on the mobile version of the theme. It can be done with css though:
@media (max-width: 767px){
.td-header-sp-top-menu{
display: block !important;}
.td_data_time{
display:none!important}
.td-header-sp-top-menu{
margin-left: 14%;
margin-right: auto;
}
}
Thanks.
I’ve put this code on custom css, but I don’t see the top menu on mobile…
Hi,
It works from my end: http://screencast.com/t/jgQW7Kxi i created the code on your website. Please check any other custom css in your theme panel and see if there are no open tags that might interfere with the css.
Thank you!
Thanks Bogdan,
I’ve checked if errors on custom css code, but everything looks fine.
But still not working on mobile.
The code I’ve add is:
@media (max-width: 767px) {
.td-header-sp-top-menu {
display: block !important;
}
.td_data_time {
display: none !important
}
.td-header-sp-top-menu {
margin-left: 14%;
margin-right: auto;
}
}
Hello,
Please check the code you already have in your custom css box, not the code I gave you. If a code has an open tag before the code I provided, then it will cause it to not apply. I have tested the css again and the result is the same: http://screencast.com/t/eDvPwfbRiqm
Another thing you can check is if you place the code in the responsive field, then you need to remove the @media. I set the responsiveness directly to the code so you can insert it in the standard custom css box, not the advanced one. Remove the @media part if you place it in the advanced css and mobile sphones section.
Thank you!
Hi Bogdan,
I’ve already check all the css code. Moreover I have test your code only on custom css (without other css codes)
just to be safe, but it does not works on my website.
Can you test it going on the WP admin,
so that you can check it directly on the website please?
Just for info, the smartphone I use to test is an iPhone 4s.
Thanks
Hello,
It seems the third time i tested this, the code did not work on my end as well. It worked the first 2 times i tried it like the screenshots above show. Strange.
Please try this one to see if it works now. I used a different container:
@media (max-width: 767px){
.td-header-sp-top-menu {
display: block !important;
margin-left: 14%;
margin-right: auto;
}
.td-header-top-menu-full {
display: block ;
}
}
Thank you
