Hi there,
We have Newspaper 6.1 installed and since earlier versions we’ve encountered the same issue.
The top-bar works perfectly on the desktop version but it just won’t show on the mobile.
Could you please help us out here?
The website is eurocross.nl
Hi
Please check this topic, Lucian posted a solution here:: https://forum.tagdiv.com/topic/top-menu-bar-doesnt-show-on-mobile/
Thanks!
hi,
I tried to add this in the custom css and nothing happens at all.
Any other solutions?
Hi
Add this css in theme panel > custm css:
@media (max-width: 767px) {
.td-header-sp-top-menu {
display: block!important;
}
}
Here is the result: http://screencast.com/t/QNuCjZrTaC
Thanks!
Thanks again for the help;
I’ve added the css (like before) see screenshot – however when refreshing the page in a normal browser and resizing it to mobile size or even with my iphone6 plus – i don’t see the menu. Could this be a server caching issue or is something else wrong?
http://www.screencast.com/t/tpQ6Or3c6Zq
Cheers again
Hi,
Try to use more specific target using the bellow css and also clear cache:
@media (max-width: 767px) {
.td-header-top-menu-full .td-header-sp-top-menu {
display: block !important;
}
}
Hope this helps!
Dude, this worked!!!!!
Yes man you rock – thanks so much
Hi,
I have the same issue on this site http://www.eurocross.nl/consumenten/
So i added the exact same css in the custom and on this one it doesn’t work.
Any ideas?
Both of the code didn’t work on our site too: http://www.vrtualmagie.org
Hi,
@Mr_S Please use this custom css in Theme Panel > Custom Css, I have also customize a little your menu items to not drop down – http://screencast.com/t/U997mXqom
@media (max-width: 767px) {
.td-header-top-menu-full, .td-header-top-menu-full .td-header-sp-top-menu {
display: block !important;
}
.top-header-menu li a {
font-size: 12px !important;
margin-right: 5px;
}
}
@Thomas If you use this custom css the top-bar will be displayed also on mobile devices – http://screencast.com/t/p0m73r0br4 but it was not designed for this device so you will need additional customization or you can try to hide for example the menu – http://screencast.com/t/8EDkS2RE3
@media (max-width: 767px) {
.td-header-top-menu-full{
display: block !important;
}
}
Hope this helps!
Hi Alin,
This solution has worked great….just one question though (i like to learn)
Why is it that the other css worked well on one site and not on the other?
Cheers
Hello Alin
The new code works.
But I only have social icons.
Could you give me the code to ONLY have the login sentence: Se connecter/ S’enregistrer ?
It would be better to our user to connect.
But the really cool stuff will be not to have this top menu on mobile but on the right a picto to connect near the search one.
Look this site on a mobile, it is very nice:
http://www.nextinpact.com
Could you do that on newt update?
REgards
Hi,
@Mr_S As the top bar was not designed to work on mobiles some of containers are also hidden, like in your case a css is to display the top bar(.td-header-top-menu-full) and the other one to show the menu(.td-header-top-menu-full .td-header-sp-top-menu). In case that you had also the social icons widget active(Thomas case) this container also will be visible(it doesn’t have css to hide it).
@Thomas Please try this custom css, this should display sign in and social icons widgets – http://screencast.com/t/jxljko5scU8T
@media (max-width: 767px){
.td-header-top-menu-full {
display: block !important;
}
.td-header-sp-top-menu {
display: block!important;
}
.menu-top-container {
display: none !important;
}
}
We will consider another implementation, at least for sign in widget.
Thanks!
Hello Alin
Thanks.
However, I ONLY need the connexion link not the social icon (to smalls).
Could you please give me the code forthat?
In some other theme we use, in the menu option, you have the choice to create a specific one only for mobile.
It would be a good idea to add this.
Thanks.
Hi,
Please use this custom css – http://screencast.com/t/ISsO24sPjd1v
@media (max-width: 767px) {
.td-header-top-menu-full {
display: block !important;
}
.td-header-sp-top-menu {
display: block!important;
}
.menu-top-container {
display: none !important;
}
.td-header-sp-top-widget {
display: none !important;
}
}
I will also add your suggestion for mobile menu on our list.
Thanks!
