Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #86051
    calmo16
    Participant

    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

    #86081
    Mahesh
    Keymaster

    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

    #86095
    calmo16
    Participant

    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

    #86105
    calmo16
    Participant

    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

    #86106
    Mahesh
    Keymaster

    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

    #86109
    calmo16
    Participant

    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

    #86112
    calmo16
    Participant

    Correction: A logo that is NOT RESPONSIVE?

    #86114
    Mahesh
    Keymaster

    Hi @calmo16,

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

    Regards,
    Mahesh

    #86115
    calmo16
    Participant

    Sorry, a non-responsive logo please.

    #86157
    Mahesh
    Keymaster

    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

    #86195
    calmo16
    Participant

    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

    #86297
    Mahesh
    Keymaster

    Hi @calmo16,

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

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

    Regards,
    Mahesh

    #86306
    calmo16
    Participant

    Hi Mahesh,

    Wow, it works!

    Thank you!
    calmo16

    #86308
    Mahesh
    Keymaster

    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

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘How to make fixed header responsive?’ is closed to new replies.