How to Change Header Width

  • Hi,
    The header width for this seems to be set at 1150px. Where can I change this? I did not see anything in the CSS to make this change.

    I would like to have a header image that is much smaller, specially about 250px in width. The rest of the header area should just be filled with bg. So currently I have to use a header image with about 900px of dead space.

    Another reason I would like to make this change is for responsiveness/mobile. When I view my site on a mobile phone, the long narrow image becomes scrunched and distorted. (This also happens when I resize a browser to small)

    Thank you in advance for any guidance.

    For reference, my site is: https://wears.me

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

  • You can change your header width with your Custom CSS:

    #header, #access, #branding, #main, #topbar-inner {
    width: 1150px;
}

    Modify it to whatever you like, but you may also need to do some modifications in the slider.

    Theme Author CryoutCreations

    (@cryout-creations)

    @wears-me That’s why we implemented a Logo Upload into the Tempera theme. Go to the Tempera Settings page >> Header Settings >> Custom Logo upload and upload your logo image there. Remove the Header Background image and you’re set.

    My custom header image is sized at 1150px width. It incorporates a logo at the left. When viewed on mobile device, the header resizes but distorts miserably. I have tried deleting the header image, and instead uploading the same 1150-px-width gif via your custom logo upload. It does not show up at all this way. There is just a blank white area above the main nav bar. I have restored my banner via the header image upload. Would you take a look and advise at to how to make it responsive?
    https://alpha.promet.cloudlook.net/
    thanks!

    Just figured it out! Under Tempera Settings/Header Settings/Header Image just check the “Keep header image aspect ratio.” It works!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to Change Header Width’ is closed to new replies.