Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 23, 2016 at 4:27 am #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

    February 23, 2016 at 12:48 pm #86081
    Mahesh
    Participant

    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

    February 23, 2016 at 4:26 pm #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

    February 23, 2016 at 4:49 pm #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

    February 23, 2016 at 4:49 pm #86106
    Mahesh
    Participant

    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

    February 23, 2016 at 5:18 pm #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

    February 23, 2016 at 5:39 pm #86112
    calmo16
    Participant

    Correction: A logo that is NOT RESPONSIVE?

    February 23, 2016 at 5:52 pm #86114
    Mahesh
    Participant

    Hi @calmo16,

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

    Regards,
    Mahesh

    February 23, 2016 at 5:56 pm #86115
    calmo16
    Participant

    Sorry, a non-responsive logo please.

    February 24, 2016 at 9:26 am #86157
    Mahesh
    Participant

    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

    February 24, 2016 at 2:11 pm #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

    February 25, 2016 at 1:25 pm #86297
    Mahesh
    Participant

    Hi @calmo16,

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

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

    Regards,
    Mahesh

    February 25, 2016 at 3:05 pm #86306
    calmo16
    Participant

    Hi Mahesh,

    Wow, it works!

    Thank you!
    calmo16

    February 25, 2016 at 5:36 pm #86308
    Mahesh
    Participant

    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
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘How to make fixed header responsive?’ is closed to new replies.