Hey there,
Please post a link to your site. Thanks!
Thread Starter
acqua
(@acqua)
Hi acqua,
thanks for using MH Newsdesk lite.
You could simply hide the elements with a line of CSS:
.logo { display: none; )
and then display it again on mobile by using media queries, for example:
@media only screen and (max-width: 768px) {
.logo { display: block; )
}
When it comes to CSS customizations, you could always use tools like Firebug or your browsers inspection tool to inspect the elements on your site and then add your own CSS code based on your personal requirements.
In order to add custom CSS code to your website, you can either make use of a child theme or plugins like Simple Custom CSS.
Thread Starter
acqua
(@acqua)
Unfortunately your code does not work.
Are the parenthesis correct?
To summarize I want:
logo (header) to show on desktop
title and tagline to show on mobile
Your initial question was:
How do I hide .logo-title and .logo-tagline for desktop and keep it for mobile only?
That is exactly what the provided code does (if implemented correctly). It will hide the site title and tagline in the header and make it visible on mobile on widths <= 768px.
logo (header) to show on desktop
title and tagline to show on mobile
That is something else than your initial question. If you want to hide the header image on mobile, you could also achieve this with some CSS (in addition to the previously provided CSS code):
@media only screen and (max-width: 768px) {
.logo-wrap img { display: none; }
}
As mentioned in the previous reply, please use tools like Firebug or your browsers inspection tool to inspect the elements on your site and then you can add custom CSS code by yourself as you like.
Sorry, one addition, you need to replace the bracket (that was a typo):
.logo { display: none; }
@media only screen and (max-width: 768px) {
.logo { display: block; }
}
Thread Starter
acqua
(@acqua)
Thank you for your suggestions.
Unfortunately
.logo { display: none; }
does not hide title and tagline on desktop
The code definitely hides these elements because these are included in the .logo container, you can see that when checking your source code:
<div class="logo">
<h1 class="logo-title">Interfans.org</h1>
<h2 class="logo-tagline">La community dei tifosi dell'Inter</h2>
</div>
You could have a look at your custom code as it’s very likely that you’re having conflicts there. It also turns out that you’re adding your code modifications to the core stylesheet of the theme. This is considered as bad practice and all your customizations will be lost after theme updates.
As mentioned previously, when adding custom CSS code, you should either make use of a child theme or use plugins like Simple Custom CSS. This will ensure that your customizations still are available after theme updates.
Unfortunately .logo { display: none; } does not hide title and tagline on desktop.
We just quickly checked your site again, you have added all the code within the media queries, that of course won’t hide the particular elements on desktop. You need to add the code exactly as provided:
.logo { display: none; }
NOT within media queries.
In case you’re not familiar with CSS, you could also have a look at some basic CSS tutorials to make yourself familiar with this: http://www.w3schools.com/css/
Individual customizations are not within scope of this free theme support service and it’s recommended to make yourself familiar with CSS and the inspection tool of your browser so that you can easily apply your own customizations as you like (if necessary).
