reduce height of header

This topic contains 6 replies, has 2 voices, and was last updated by  adambeazley 1 day, 9 hours ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #27991

    adambeazley
    Participant

    Supported

    In general I would like to know how to reduce the size (pixel height) of the header on all pages.

    I would also like to know if there is a way to reduce the header size (pixel height) on pages (in my case private pages) which do not have a header image. I like the header with the title and breadcrumbs, but when there is no image it looks oversized.

    Attachments:
    You must be logged in to view attached files.
    #28004

    CTHthemes
    Keymaster

    Try this code:

    
    .parallax-section {
       padding: 100px;
    }
    

    change the padding value with yours.

    #28038

    adambeazley
    Participant

    Supported

    Thank you, that code works across the board, but is there any way to only have that padding smaller on pages without a background image? or only on private pages?

    #28049

    CTHthemes
    Keymaster

    Yes, just delete header background from page editing screen. http://prntscr.com/lrskl5

    #28058

    adambeazley
    Participant

    Supported

    Maybe I’m not making myself clear, but let me try to describe what i am trying to accomplish.

    On most of my pages I like the current design with the 250px padding for the header.

    However, I have some pages which do not have a header image (I don’t want to put one), so it shows up as a big grey header with the title and breadcrumbs in it (see first attached image above). I would like to specifically change the padding on these specific pages (these are all private pages by the way), but leave the default 250px padding on all other pages. I assume this would be done with some sort of php if statement in the template?

    I just wanted some guidance on how to accomplish this.

    #28088

    CTHthemes
    Keymaster

    You can use page id to specify the pages.
    For example in this screenshot ( http://prntscr.com/lsvps1 ) I have page-id-172 class on body tag. So the code is:

    
    .page-id-172 .parallax-section {
       padding: 100px;
    }
    

    or for multiple pages:

    
    .page-id-172 .parallax-section,
    .page-id-173 .parallax-section,
    .page-id-174 .parallax-section {
       padding: 100px;
    }
    

    Read this tutorial for more details: https://www.tipsandtricks-hq.com/how-to-use-firebug-to-modify-your-wordpress-sites-css-video-tutorial-4037

    #28100

    adambeazley
    Participant

    Supported

    thanks you very much, got it working perfectly now.

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

The topic ‘reduce height of header’ is closed to new replies.

Hello! CityBook version 1.2.7 was released. Bulk Import Add-On, OpenStreetMapView Details
+