Hi there Hybis!
Yes, you could use the css property of “display” and only apply it when the screen is less then mobile.
Like this:
@media only screen and (max-width: 414px) {
img.kad-standard-logo{
display: none;
}
}
For the top bar you could change the background-color of the header like this:
.headerclass {
background: #2d5c88;
}
I hope that was what you were after. 🙂
Thread Starter
hybis
(@hybis)
Thank you! the code works like a gem.
I got one more question. After taking out the logo on mobile, there seems to be some blank space in between the topbar and the title of the page. Is there any way to take out the blank space?
Here is the css code:
.page-header {
margin-top: 40px;
}
.contentclass {
padding-top: 15px;
}
Change these numbers to want you want. Play around with it until it looks good. If you don’t want any space set these to 0.
Hope that helps 🙂
You may also have some padding on the logo itself. I would suggest trying this code:
@media only screen and (max-width: 767px) {
#logo{
display: none;
}
}
Kadence Themes
