[calmo16]

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 calmo16

[Mahesh]

Hi @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,
Mahesh

[calmo16]

Hi 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

[calmo16]

About 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

[Mahesh]

Hi @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,
Mahesh

[calmo16]

Hi 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

[calmo16]

Correction: A logo that is NOT RESPONSIVE?

[Mahesh]

Hi @calmo16,

Do you need responsive logo or non-responsive logo? Its confusing, please confirm first, then I can help you.

Regards,
Mahesh

[calmo16]

Sorry, a non-responsive logo please.

[Mahesh]

Hi @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,
Mahesh

[calmo16]

Hi 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

[Mahesh]

Hi @calmo16,

For making logo below menu non-responsive, add the following CSS:

#site-logo img {
    max-width: none;
    width: 1200px;
}

Regards,
Mahesh

[calmo16]

Hi Mahesh,

Wow, it works!

Thank you!
calmo16

[Mahesh]

Hi @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#postform

Have a nice day!

Regards,
Mahesh

[Author]

Posts