How to make the site-wide header logo larger

[Marsha GrahamParticipant Post count: 1]

Hi,

I would like to centre align a larger logo – perhaps 400px (w) x 150px (h) – above the main navigation menu in this theme. I would like to place it above the menu so that the menu can still extend a reasonable way across the page (but still have it right aligned). Can you please tell me how I can do this? I can find my way around CSS and the theme files confidently and I’m great at following instructions but not so good at working out CSS so any help you would provide would be most appreciated.

Cheers,
Marsha

PS. Have you considered adding multiple/customisable side-bar options to your themes?

[themeweaverKeymaster Post count: 730]

It isn’t that simple.

This is a responsive theme so pixel dimensions of the image are irrelevant. The exact dimension of the space available to the logo are different on different platforms – mobiles, tablets, desktops etc. The image width always shrinks to fit the available space.

The layout is governed by extend\layout.css and is specified in percentages. But care should be taken since you can break the responsive nature of the theme.

[Nick TruscottParticipant Post count: 67]

Tim, I’m facing a similar issue as the client wants a full width header/logo that is also responsive.

I’ve got a 1000px png header which responds great at most mobile or large monitor or laptop screen sizes, but there is the equivalent of a “blind spot” at a kindle sort of size.

I appreciate your previous response to Marsha, but can you offer any advice?

[themeweaverKeymaster Post count: 730]

Big header images are never going to look great on all devices.

Responsive design is about accepting and designing things to look different on different devices. So in most themes the menu folds away, logos and titles go under each other rather than across etc, etc.

So having one big header image is not going to work and I don’t believe even if you made it so, it would not look all that great across devices.

Solution – educate the client. Big header images are a very bad design choice. You might as well go back to a fixed with design.

[Nick TruscottParticipant Post count: 67]

I do appreciate that Tim and agree about educating clients. However they have been insistent and it was mainly about the “blind spot” I mentioned. They were happy with the wider logo as it appeared on most mobile platforms (but I wasn’t / am not).

To appease them I have fiddled and tweaked and used the logo settings for mobile devices (extend/layout.css) in my custom CSS and that – together with reducing the width as much as possible) has resolved their issue. When the current “webmaster” retires I feel sure that the new incumbent will accept the default theme functionality very readily and revert to it.

Thanks again for everything you do to support so many ministries – a real blessing.

Nick

[Author]

Posts