Reduce size of header

Hi,

I have the Spicepress pro theme with header standard. I would like to reduce the size of the header to make it thiner (the header of the menu, and the header below).Could you please help ? Thanks a lot






Comments

  • Hi, @mcouturier

    Thanks for contacting us!

    To reduce the height of the header, you have to add custom CSS code.
    Go to Appearance >> Customize >> Additional CSS and add the given below custom CSS code:

    .page-title-section {
        padding: 20px 0 22px !important;
    }
    @media only screen and (min-width:1100px) {
    .navbar-custom .navbar-brand {
       padding-bottom: 0 !important;
       padding-top: 10px !important; }
    .navbar-nav {
       height: 75px; }
    .navbar-right li > a {
       padding-top: 25px !important;
       padding-bottom: 30px !important; }
    .navbar-custom {
       min-height: 0px !important;
    }}

    I hope it will work for you.

    Thanks 
    Rishabh
  • Thanks a lot it works.

    Also, is it possible to increase the space for the logo ? It is actually 210px X 49px but this is too small and my logo can't be seen very well.

    I would like to increase the length to 250 or 280px.

    What CSS code can I use for that ?

    Many thanks for your help
  • Hi,

    To do this, replace the above CSS code which I gave you in last comment by the given below custom CSS code:

    .page-title-section { padding: 20px 0 22px !important;}
    @media only screen and (min-width:1100px) {
    .navbar-custom .navbar-brand {
        padding-bottom: 5px !important;
        padding-top: 5px !important; }
    .navbar-nav { height: 75px; }
    .navbar-right li > a {
        padding-top: 31px !important;
        padding-bottom: 30px !important; }
    .navbar-custom { min-height: 0px !important;}
    .navbar-brand img { width: 280px !important; }}

    I hope it will work for you.

    Thanks
  • Hi

    Thank you for your reply. Unfortunately, when I upload my logo, it is blurry. I precise that my logo is in the same size as the aera for the logo that I've customized (280px width).

    When I upload my logo, here's what happen : I have to resize it to the original size (49px x 210 px), which is weird because, I am supposed to be able to upload an image that is 280px width.

    Is there any solution ?

    Thanks a lot



    Annotation 2019-09-12 161305.png
    1824 x 847 - 49K
  • Hi,

    You need to change a little bit of code in functions.php file. Refer to this screenshot.
    After doing this you need to upload a logo again.

    Let me know for any confusion!

    Thanks
  • Hi,

    Is your problem resolved?
    If yes, please allow us to close this discussion.

    Thanks
Sign In or Register to comment.