- This topic has 13 replies, 2 voices, and was last updated 8 years, 1 month ago by Mahesh.
-
AuthorPosts
-
February 23, 2016 at 4:27 am #86051calmo16Participant
Hi,
How to make fixed header responsive – for small screens?
And is it possible to put the image in the middle?Thanks in advance?
BR calmo16February 23, 2016 at 12:48 pm #86081MaheshKeymasterHi @calmo16,
You have a really long menu that is why there is an issue with responsive, you can use the following CSS to reduce the padding by a little. Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS:
@media screen and (min-width: 1200px) and (max-width: 1280px) { .clean-box-nav-menu a, .sidebar-header-right .widget_nav_menu a { padding: 13px 15px; } } @media screen and (min-width: 991px) and (max-width: 1201px) { .clean-box-nav-menu a, .sidebar-header-right .widget_nav_menu a { padding: 13px 10px; } }
And for putting the image in the middle, add the following CSS:
#fixed-header-top #logo-icon { margin: 0 auto; float: none; display: block; text-align: center; } #fixed-header-top #logo-icon img { display: inline-block; }
Regards,
MaheshFebruary 23, 2016 at 4:26 pm #86095calmo16ParticipantHi Mahesh,
Thanks again.
This logo issue is driving me crazy π
Right now the logo is on top of the menu. Two questions:
– can the logo be NOT responsive (because right now it’s getting very small on small screens)?
– also on small screens the distance between the nav bar and the content block seems not good.
This the code i’m using right now:#site-branding, #masthead {
padding: 1;
}How can I get more padding? 2 etc…gives no changes.
So the distance between menu and content block is ok on a laptop but it too close on a iphone. Hope you get my point.
BR calmo16
February 23, 2016 at 4:49 pm #86105calmo16ParticipantAbout the padding: I can use % i see now π
I will move my logo to the place below the menu, because I think in this design it is THE RIGHT place, isn’t it?BR calmo16
February 23, 2016 at 4:49 pm #86106MaheshKeymasterHi @calmo16,
I hope this will fix your issue with responsive header, logo size and distance between menu and content block. π
Please add the following CSS in “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box:@media screen and (max-width: 768px) { #logo-icon, #logo-icon img { width: 220px; } #fixed-header-top #logo-icon { display: inline-block; } }
Regards,
MaheshFebruary 23, 2016 at 5:18 pm #86109calmo16ParticipantHi Mahesh,
Thanks for your quick response!
I think i’ll stick with this code π
#masthead #site-logo {
margin-top: 0;
}#masthead #site-logo {
margin-bottom: 0;
}
#masthead .wrapper {
width: 100%;
}#site-branding, #masthead {
padding: 0;
}Last question about the logo: Is it possible to make A responsive logo on this position (site-branding), and if yes, how?
BR calmo16
February 23, 2016 at 5:39 pm #86112calmo16ParticipantCorrection: A logo that is NOT RESPONSIVE?
February 23, 2016 at 5:52 pm #86114MaheshKeymasterHi @calmo16,
Do you need responsive logo or non-responsive logo? Its confusing, please confirm first, then I can help you.
Regards,
MaheshFebruary 23, 2016 at 5:56 pm #86115calmo16ParticipantSorry, a non-responsive logo please.
February 24, 2016 at 9:26 am #86157MaheshKeymasterHi @calmo16,
The last CSS I’ve given you above will make the image logo non-responsive (width fixed to 220px) in devices with max-width of 768px and also put the logo in the center as you’ve mentioned. I just checked your site and seems that you’ve changed the logo and moved it below the primary menu.
Regards,
MaheshFebruary 24, 2016 at 2:11 pm #86195calmo16ParticipantHi Mahesh,
Yes, i’ve moved the logo below the primary menu and was asking for the code on that position π
It seems the code you’re referring to is for the position above the primary menu.
So your code doesn’t seem to work for the logo below the menu.BR calmo16
February 25, 2016 at 1:25 pm #86297MaheshKeymasterHi @calmo16,
For making logo below menu non-responsive, add the following CSS:
#site-logo img { max-width: none; width: 1200px; }
Regards,
MaheshFebruary 25, 2016 at 3:05 pm #86306calmo16ParticipantHi Mahesh,
Wow, it works!
Thank you!
calmo16February 25, 2016 at 5:36 pm #86308MaheshKeymasterHi @calmo16,
Thank you for your appreciation. If you like my support and Clean Box theme then please support by providing your valuable review and rating at
https://wordpress.org/support/view/theme-reviews/clean-box?rate=5#postformHave a nice day!
Regards,
Mahesh -
AuthorPosts
- The topic ‘How to make fixed header responsive?’ is closed to new replies.