Customise Argent Theme Page header height

  • I want to be able to add custom css to the page header area to reduce the white space above and below the Title for a more compact header area.

    Can someone please advise how to go about this. thanks

    The blog I need help with is: (visible only to logged in users)

  • Hi Derek,

    The ability to add CSS is a Custom Design option that’s included as part of the WordPress.com Premium or Business plans.

    If you choose to upgrade to either of those plans, you could then reduce the height of Argent’s header area with the following custom CSS:

    @media screen and (min-width: 768px) {
        .home .site-branding {
            padding: 1.2em 0;
        }
    }
    
    .site-branding {
        padding: 1.2em 0;
    }

    Increase/decrease the first numeric value of padding to increase/decrease the height of the header area. Please note that increments/decrements of 0.1 are enough to have an impact e.g. 1.3em, 1.4em, etc.

    The first snippet controls the padding surrounding the header area on your site’s home page while the second controls the header area on every other page of your site.

    If you don’t wish to upgrade to a plan, then you could consider a different theme. Illustratr, Espied, and Pictorico are a few nice examples of portfolio themes in which the header area doesn’t take up as much space as Argent’s.

    Let me know if that’s helpful or if you have any further questions.

  • The topic ‘Customise Argent Theme Page header height’ is closed to new replies.