Hello!
Yes, this can be very easily achieved by applying a little bit of custom css.
Here is the code You need:
.home .header-hgroup {
display: none;
}
If you have Jetpack installed, paste this code to Appearance->Edit CSS, or You could use the Simple Custom CSS plugin and paste in the code to ‘Appearance->Custom CSS’.
Please let me know if You need any help implementing this.
Greetings,
Balint
You are welcome 🙂
If you have any more questions, feel free to ask and I am happy to help.
Have a nice day!
Balint
I’ve noticed that when the window is below a certain size, the logo still appears. For example, I often have my browser take only half my screen. When that’s the case the logo still shows up. Any ideas why?
Hello!
This is because how the responsive functionality works, this header (the logo with the 3 horizontal row menu icon) appears only when You visit the site with a device which has a smaller screen size, and when You resize the browser window, the same functionality kicks in.
This code will hide the logo:
.resp_full_width_menu .site-header .logo_wrapper {
display: none !important;
}
Cheers,
Balint
Yea, Balint is right, but I will point out the uses of !important – too many can cause more problems.
For fully responsive design, the CSS should include ‘media screen’ and be coded correctly.
With !important, it is essentially writing, re-writing, and then over-writing (normal, reduced, remove-from-reduced).
Thanks! There seems to be an intermediate menu though, which is the one I was talking about.
widest display: logo on the left and menu on the right
intermediate: logo on top, and menu just below it
narrowest: logo with three horizontal bars
How do I get rid of the logo on the intermediate level, keeping in mind that I again only want to get rid of it on the home page?
Thanks again
I believe the level that bothers me is the tablet level, not the mobile level. Any ways to get rid of the logo on the home page for that?
Thanks!
Solved it, just adding !important to Balint’s first code made the logo disappear even for smaller screens.
.home .header-hgroup {
display: none !important;
}
