Hey, so you’re wanting the height to be 100px always? Can you post a link?
my site is http://www.InstantTagz.com the logo is to small on mobile devices.
You just need to remove this from your custom css box:
.stickyheader #kad-banner #logo a img {
max-height: 40px !important;
}
Hannah
Its not in the custom css box
Hi there, it looks like you need to put that CSS in the media query section of your stylesheet, like so:
@media (max-width: 992px) {
.stickyheader #kad-banner #logo a img {
max-height: 100px;
}
}
You might want to try using percentages instead of pixel dimensions though so it’s more fluid.
If you’re using a child theme (which is generally recommended) or have a space to put in custom CSS, then you shouldn’t need the !important because it should take precedence over the styles in the theme’s original stylesheet.
For some reason it not over writing the index code
@mwilson1750
Try this, click on the theme options > main settings. Scroll down to the header style. choose the third options for the shrink header. When you do you should see an option for the mobile sticky header, make sure that is set to off. Then reselect the standard header and save your theme options.
Kadence Themes
That worked, but it wont let me use the standard sticky header option and display the logo right. Also I need the logo centered.
I don’t follow? “standard sticky header option and display the logo right”
Do you have a caching plugin? I still see css as if the mobile sticky header is still turned on?
Kadence Themes
It working now. You guys are great. The only problem I have now is that there is a space between the header and the image background I have.
http://www.InstantTagz.com
The space is only on small screens
Chrome and the space show at about 1013px or lower.
try adding this css:
@media (max-width: 1200px) {
.sf-menu a {
padding: 10px 15px;
}
}
Kadence Themes
That didn’t work.
The problem is here
<div class=”wrap contentclass” role=”document” style=”padding-top: 15px;”>
