Resize header without changing width of posts

  • Resolved mdzg

    (@mdzg)


    11 years, 10 months ago

    Hi,

    I’m working on a child theme of Ignite and have been trying to reduce the size of the header bar. There’s no image for the header, just a background color. I’m successfully able to resize the header height by specifying a number (not percentage; it’d be nice to make the header 70% of what it was or like 20% of the total page height), but oddly, that reduces the width of the posts and sidebar.

    I haven’t made any changes to the sidebar size. I would post my CSS for .site-header, but it’s color changes. I edited header.php but just to add a div with some text that aligns itself in the center horizontally.

    To sum up: I’m comfortable editing CSS and any php files. I have a child theme. I’d like the make the header shorter without the width or placement of any other elements changing.

    Thanks! Ignite’s been great so far.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    11 years, 10 months ago

    Thanks for using Ignite!

    The site header has a min-height of 4.5em (72px), but is otherwise decided by the height of the elements inside it. You could set the min-height to none and it would collapse to only fit what’s inside it.

    You wouldn’t want to set its height based on the height of the page because the height will end up based on the viewport which means it will vary greatly between different screens/devices.

    For decreasing the width of the site-header you should be able to set it to a percentage. If the widths of other elements were changing it was likely an issue with the CSS selector being used. Make sure you’re using the “.site-header” class and add an “#ignite-child” selector before it if you need more specificity.

    I hope that helps, but feel free to post more questions.

    Thread Starter mdzg

    (@mdzg)

    11 years, 10 months ago

    Thanks for the prompt reply!

    I actually just figured it out. The text div I had had a clear:both property set, and somehow that forced the header to be taller than it should have been. I removed that and changed the positioning. What annoys me is that when I inspect the text element, the text doesn’t appear as on top of the div. That has nothing to do with site appearance, though.

    Theme Author Ben Sibley

    (@bensibley)

    11 years, 10 months ago

    Glad I could be of assistance 🙂

    If you’re having issues with layering/hierarchy, I’d suggest messing around with z-index’s and positioning.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Resize header without changing width of posts’ is closed to new replies.