Okay
  Public Ticket #3123968
Reduce headers top and bottom margins
Closed

Comments

  •  3
    mitsus started the conversation

    Hi Support,

    please can you explain me how can I reduce the top and bottom margins for the headers (the header that contains logo and main menu and the header that is immediately below).

    Thanks a lot

    Francesco

  •  1,284
    Barry replied

    Hi Francesco,

    Thank you for your message.

    You can reduce the header element that contain the logo and main menu by adding the following CSS to Appearance -> Customize -> Additional CSS:

    /* Reduce logo and menu bar header height */
    @media (min-width: 992px) {
        .main-navigation > li > a {
            padding-top: 38px;
            padding-bottom: 36px;
        }
        .header .header-wrapper .header-logo {
            height: 100px;
        }
    }
    

    The 38px, 36px and 100px values in above code can be decreased to your own needs to reduce the height.

    To reduce the header element that contain the contact details you can add the following as well:

    /* Reduce contact details header height */
    @media (min-width: 992px) {
        .header-widgets .widget {
            padding: 30px 0;
        }
    }
    

    The 30px value in above code can be decreased to your own needs.

    Hope this helps.

    Best regards,
    Barry
    QreativeThemes.com  |  ThemeForest Themes

  •  3
    mitsus replied

    Dear Barry,

    thanks for your fast reply.

    I tried to add the CSS code and it really work fine, the issue is that I added a button on the right of main menu and for me is it necessary also reduce the padding (top and bottom) of the btn.

    Please see the attached picture.

    Let me know

    Regards

    Attached files:  Personalizza osteofisioroma – Un nuovo sito targat.png

  •  1,284
    Barry replied

    You're welcome!

    This will be possibly by adding the following custom CSS as well:

    /* Reduce margin around header button */
    @media (min-width: 992px) {
        .header .header-wrapper .featured-button {
            padding-top: 20px;
            padding-bottom: 20px;
        }
    }
    

    Both 20px values can be reduced to your own needs.

    Hope this helps.

    Best regards,
    Barry
    QreativeThemes.com  |  ThemeForest Themes

  •  3
    mitsus replied

    Thanks a lot! It works.

    Fast and affective reply.

    Have a good day

    Regards

    Francesco

  •  1,284
    Barry replied

    Great, I'm glad to hear that!smile.png

    Let me know if you have any other questions.

    Thanks, have a great day as well!

    Best regards,
    Barry
    QreativeThemes.com  |  ThemeForest Themes

  •  3
    mitsus replied

    Hi Barry, you can close this ticket.

    I will open another one for another topic

    Regards

    Francesco

  •  1,284
    Barry replied

    Hi Francesco, ticket is closed on your request.

    Feel free to open a new ticket if you have any questions.

    Best regards,
    Barry
    QreativeThemes.com  |  ThemeForest Themes