Centre Header Title

  • Author
    Posts
  • #1957025

    Is it possible to centre my header across the top margin? Instead of having it on the left hand column?

    The blog I need help with is wanderingmason.com.

    #1957132

    francisbob
    Member

    Hi there !

    I’m a little bit new here but your request may be hard to accomplish since I don’t think you can modify theme files (to move the header code elsewhere)

    I found a partial solution for you using CSS, but the header will then be problematic for mobile devices (less than 960px), I’ll think of something during the day.

    #main{
        margin-top:9em;
    }
    #masthead{
        position:relative;
        left:33em;
        top:-1em;
    }
    #subsidiary{
        position:static;
    }

    Keep me posted !

    #1957158

    @francisbob, nice work. I might suggest turning your code into a Media Query so that when the right sidebar moves to the bottom below the content at 924px and narrower, that the site switch back to the original design. We can do that by turning what you gave above into this:

    @media screen and (min-width:925px) {
    #main{
        margin-top:9em;
    }
    #masthead{
        position:relative;
        left:33em;
        top:-1em;
    }
    #subsidiary{
        position:static;
    }
    }

    #1957168

    francisbob
    Member

    Yeah great idea !

    Can’t find a way for under 925 though, I would normally use jQuery for that !

    Nice work :)

    #1957207

    Yeah, without being able to edit the HTML, this is difficult on responsive width themes. I think limiting it to widths wider than 925px is the cleanest. You can create a more Media Queries to adjust the position as the window gets narrower and for smaller devices, but that can get cumbersome.

    #1957230

    Thanks guys! I will have a play around.

    #1957231

    The code works a treat!! Thanks again :)

    #1957232

    francisbob
    Member

    Cool ! Happy to help, thanks to @thesacredpath for the media query :)

The topic ‘Centre Header Title’ is closed to new replies.