Customize header

  • Author
  • #1634194



    I have problems customizing my blog header to fit the width of the page. I tried out some CSS codes but obviously didn’t succeed. Anyone have any ideas how to fix it?

    Many thanks,

    The blog I need help with is




    I see that you have the Pilcrow Theme, the dimensions for the custom header on that them are 770 by 200 for two-column and 990 by 257 for wide layouts.

    You can find more information here : Pilcrow Theme




    And thanks for the response!

    I’m just wondering what exactly I should insert in the CSS? For now I’ve used a code I found on the CSS help page and customized it for my page:

    #masthead {
    position: center;
    width: 990px;
    height: 257px;

    I’ve had my Pilcrow theme redone so that the max width of the page is now 1100px and I wonder whether the standard Pilcrow header size should be customized to fit the current layout?

    Many thanks,


    Hi Mia, I’m not seeing a header image on If you have a header image you wish to use on your site, upload it to your media library and we can help you get it into your site.



    Just yesterday I deleted it actually, since it didn’t look good being so different compared to the rest of the layout. I will upload it again, thanks!


    Mia, create a 200px high x 1100px wide header image, upload it to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks in the background declaration below and see what you think. If you narrow your browser window way down, you will see that the menu starts to overlap the image at narrow widths, but then Pilcrow isn’t the best when viewed on smartphones even without any modifications since it is a flexible width design theme rather than responsive. I would suggest viewing your site on a smart phone to see what it looks like, both before and after this mod, and then I would suggest going to Appearance > Mobile and activate the mobile Mini-Eleven theme and see what you think of that on a phone. It is pretty minimalist, but it does view well on mobiles.

    #pic {
        background: url("URL_OF_IMAGE") no-repeat scroll center top rgba(0, 0, 0, 0);
        background-size: cover;
        border-bottom: 2px solid #222222;
        height: 200px;
        margin-top: 63px;
    #header img {
        visibility: hidden;


    Thanks a lot! I tried it, it worked, but indeed the layout was not so good anymore, so I decided to leave the header out. Perhaps I’ll try it with another theme at a later point. On that note though, do you know whether it’s possible to move the site title text “magnolia by Mia” from the right side to the center, and to do something about the font separately from the rest of the text? If not, I’ll leave it as it is.


    Hi there,

    Is there a way to replace the header with a logo on the top left corner of the homepage?


    @intouchoutdoor, since the two sites linked to your username are using different themes, can you please start a new thread in the CSS Customization forum to prevent confusion for those coming to this thread in the future? Many thanks in advance, and I’ll watch for your new post.

The topic ‘Customize header’ is closed to new replies.