How to make header size smaller ( remove allocated space for header image )

Home Forums Spacious Free How to make header size smaller ( remove allocated space for header image )

Tagged: 

This topic contains 12 replies, has 5 voices, and was last updated by  Mike 2 years, 6 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1271672

    mail86
    Participant

    Hi 🙂

    I am working on the following site: https://www.zenith.vision/

    How do I reduce the allocated header and footer height?
    Seems there is allocated space for site logo and/or image by wordpress or the theme CSS.
    Can I remove that through custom CSS?

    Thank you for your help

    #1271715

    Hello @mail86,

    The header/footer height are dynamic and changes according to its content but you can reduce it by using css.
    Please paste the following code under Appearance->Customize->Design->Custom Css and see if it works for you.
    For header:

    #site-title a {
        font-size: 30px;
    }
    #header-text-nav-container {
        height: 90px;
    }

    For footer:

    .tg-one-fourth {
        padding-bottom: 0px;
    }

    Regards,
    ThemeGrill Support Team

    #1271748

    mail86
    Participant

    Thank you for a swift reply 🙂

    The following Custom CSS seems to give the best results:

    #site-title a { font-size: 32px; }
    #header-text-nav-container {
    height: 105px; }
    #site-navigation { padding: 0px; }
    #header-left-section { padding: 0px; }
    #header-right-section {
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px; }

    #header-text-nav-wrap {
    padding: 0px 0px 0px 0px;
    }

    .tg-one-fourth {
    padding-bottom: 0px;
    }

    #1271765

    Hello @mail86,

    Glad to know that you worked it out yourself.
    And thanks for sharing your solution.

    Regards,
    ThemeGrill Support Team

    #1273639

    mail86
    Participant

    The custom CSS :

    Changing header size – and right and left content padding

    /* #wpadminbar { display: none; } */
    #site-title a { font-size: 32px; }
    #header-text-nav-container {
    height: 105px; }
    #site-navigation { padding: 0px; }
    #header-left-section { padding: 0px; }
    #header-right-section {
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px; }

    #header-text-nav-wrap {
    padding: 3px 0px 0px 0px;
    }

    .tg-one-fourth {
    padding-bottom: 0px;
    }

    /* #page-header {
    position: fixed; top: 0;
    height: 200px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    } */

    Seems to make the header menu transparent on mobile :-/ ( See picture )
    Any ideas on how to change this?

    Screenshot

    Link to: Screenshot

    #1273927

    romosamatya17
    Moderator

    Hi there,

    Paste this CSS code in the Custom CSS Box provided through the Customize Options:-

    @media(max-width: 768px){
     #header-text-nav-container {
       height: auto;
     }
    }

    Thanks.

    #1274340

    mail86
    Participant

    Thank you! 🙂

    Works beautifully with all variations of custom padding.

    #1274406

    Hello @mail86,

    Glad to know that your issue is solved.
    Feel free to post any queries regarding the theme encountered in the future.

    Regards,
    ThemeGrill Support Team

    #1274486

    mail86
    Participant

    Haven’t seen the reference to @media before. How does that work?
    And why is max-width set to 768px – when the site layout is set to:
    ‘Wide layout with content width of 978px’ ?

    Thank you for swift and competent support 🙂

    #1274499

    akunfb501
    Participant
    #1274639

    Hello @mail86,

    @media is used to address different screen sizes that the site can be viewed on and max-width 768px means it is targeting that screen size.

    Regards,
    ThemeGrill Support Team

    #1274641

    Hello @akunfb501,

    Can you please elaborate your issue ??

    Regards,
    ThemeGrill SUpport Team

    #1276572

    Mike
    Participant

    Hello, I tried pasting the above CSS, but could not get the header to become thinner. I would like the slider the be 5 pixels below the menu and logo so that when I get drop down menus, they are closer to the primary menus. Right now the drop down menus display in the slider, so there is a large gap.
    My site is:
    https://meltin.jp

    Please advise.
    Thanks!

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.