Hello, I’ve found out this issue.
Everything I add as custom CSS in Sparkling Theme > Other disappears when I visit my website on my mobile.
Hover effects on menu won’t show; hidden tags get shown again; custom buttons maintain the old text.
How can I fix this?
Hi @sebagela,
I hope you are well today and thanks for posting here.
Could you please share me the custom CSS code that you are using on your site and your site URL where it’s happening so that i can troubleshoot it?
Kind Regards,
Movin
Hello Movin,
my site is www.formazionegestalt.it
I’m going to write down the whole code in Custom CSS as it is, but it’s a little messy because there’s no space between lines.
.navbar-default .navbar-nav li a { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-weight:bold; letter-spacing: 0.03em; text-transform: capitalize } .entry-title { font-family: Verdana, Geneva, sans-serif; font-style: normal; }
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus, .navbar-default .navbar-nav .open a, .navbar-default .navbar-nav .open a:hover, .navbar-default .navbar-nav .open a:focus, .dropdown-menu li a:hover, .dropdown-menu li a:focus, .navbar-default .navbar-nav .open .dropdown-menu li a:hover, .navbar-default .navbar-nav .open .dropdown-menu li a:focus, .dropdown-menu .active a, .navbar-default .navbar-nav .open .dropdown-menu .active a { text-decoration:; background: color: transparent; }
.navbar > .container .navbar-brand { font-family: Verdana, Geneva, sans-serif; font-size: 30px; font-weight:bold; letter-spacing: 0.05em; text-transform: capitalize } .widget_wpcom_social_media_icons_widget .genericon { font-size: 20px; } @media (min-width: 1200px) { .container { width: 1220px; } body.single-post footer.entry-meta .tagcloud { display: none !important; } a.btn.btn-default.read-more:before { content: "Leggi l'articolo"; font-size: 12px; } a.btn.btn-default.read-more { font-size: 0; } #comments h2.comments-title { display: none; } .navbar li.current-menu-item, .navbar li:hover { background-color: #DA4453; }
body .navbar-default .navbar-nav .current-menu-ancestor a.dropdown-toggle {
background-color: #DA4453;
color: #fff;
}
I found some issues in your shared CSS code so resolved those issues in the following CSS code.
Please try using below CSS code replacing your existing custom CSS code. After making this change before testing please clear your browser cache.
.navbar-default .navbar-nav li a { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-weight:bold; letter-spacing: 0.03em; text-transform: capitalize } .entry-title { font-family: Verdana, Geneva, sans-serif; font-style: normal; }
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus, .navbar-default .navbar-nav .open a, .navbar-default .navbar-nav .open a:hover, .navbar-default .navbar-nav .open a:focus, .dropdown-menu li a:hover, .dropdown-menu li a:focus, .navbar-default .navbar-nav .open .dropdown-menu li a:hover, .navbar-default .navbar-nav .open .dropdown-menu li a:focus, .dropdown-menu .active a, .navbar-default .navbar-nav .open .dropdown-menu .active a { color: transparent; }
.navbar > .container .navbar-brand { font-family: Verdana, Geneva, sans-serif; font-size: 30px; font-weight:bold; letter-spacing: 0.05em; text-transform: capitalize }
.widget_wpcom_social_media_icons_widget .genericon { font-size: 20px; }
@media (min-width: 1200px) {
.container { width: 1220px; }
body.single-post footer.entry-meta .tagcloud { display: none !important; }
a.btn.btn-default.read-more:before { content: "Leggi l'articolo"; font-size: 12px; }
a.btn.btn-default.read-more { font-size: 0; }
#comments h2.comments-title { display: none; }
.navbar li.current-menu-item, .navbar li:hover { background-color: #DA4453; }
}
body .navbar-default .navbar-nav .current-menu-ancestor a.dropdown-toggle {
background-color: #DA4453;
color: #fff;
}
Hello Movin,
I did what you told me:
background: to.dropdown-menu .active a { color: transparent; } )No results, unfortunately 
Tags are still visible under my articles.
There’s still a comment title.
Active menus are transparent.
The read more button has the old title, not the new one.
Everything works just fine on pc, though.
I added background because I was getting text and background of the same color on hover menus and active menus
Do not add only part of the provided code, please try using the whole code as it is which i have provided.
That’s what I did. On first test, I was getting red text and background on menus, so there was an error. Of course i erased cache first. Gave a try to the mobile version and things were not working. Tried different browsers or laptops/mobile phones but nothing changed.
I kept the code you provided and, on SECOND test, I only added “background” to solve the issue of red text and background (that means that text could not be read). Erased cache and so on. Can now read items in the main menu, but everything is still messed up on mobile as usual.
Anyway, I compared my old code to new code you provided and could only notice one difference, which is text decoration (i forgot to erase it: it was underlined days ago).
Hi @sebagela,
I troubleshooted it and found the custom CSS functionality is working fine on your site but it seems the custom CSS code that you have added is not developed such a way so that it will work on mobile devices.
Could you please tell me specifically what changes you want on mobile devices and share the screenshots of it so that i can develop custom CSS code for you to achieve it?
Regards,
Movin
Hello @Movin,
Basically, I need these 3 functions (which are already active on the desktop version):
Current page is white/transparent in the main menu and cannot be read. Text should be white whith a red background as it is in the desktop version;
The button shows “Approfondisci” as text, but it should be “Leggi l’articolo” like the desktop version;
Tags and comment title should be hidden under every article posted. They are hidden in the desktop page.
Thanks for the help 
So, codes don’t automatically convert in the mobile version, do they?
You can achieve all of this by using the below CSS code.
.navbar li.current-menu-item, .navbar li:hover {
background-color: #DA4453;
}
a.btn.btn-default.read-more {
font-size: 0;
}
a.btn.btn-default.read-more:before {
content: "Leggi l'articolo";
font-size: 12px;
}
body.single-post footer.entry-meta .tagcloud {
display: none !important;
}
That’s exactly what I needed, thanks!!!
You are most welcome here 