Widening the Header
-
Hi there,
I’ve been able to widen everything on my home page (2014 theme) and my menu bar using the following:
.site {
max-width: 100%;
position: relative;
}.site-header {
max-width: 100%;
position: relative;
width: 100%;
}My top banner/header, however, is still not wide enough. I’d like it to match the width of the menu bar. The header image is sized in my media library at 1260×240.
Any suggestions/tips would be most appreciated. Thank you in advance.
The blog I need help with is: (visible only to logged in users)
-
What size monitor are you using? The header image is really large on my laptop screen and the menu bar is full-width, it will become as large as the browser width even if you have a super-widescreen monitor.
You might have more luck centring your existing header so that when you are viewing on a really wide screen, instead of using a giant image file which will be slow to download, it will still look good with even margins on each side. Try this out and let me know what you think:
#site-header { text-align:center; } -
Oooo yes! Thank you! I like it centered very much.
Is there also anyway to slightly decrease it vertically (up and down) at all? By maybe 15-20%? (My laptop is 14″.)
-
If you want the header image to appear less tall you’re better off editing it in photoshop (or the image editing program of your choice) but leaving the width the same and re-uploading it to your media library. If you condense the height of the image with CSS the text in it will appear all squished up which is not ideal. Likewise if you reduce the image size proportionately it will get narrower too – which is what you’re trying to avoid in the first place!
-
Bingo. That did the trick. Thank you so much for all of your help! It is most appreciated.
-
-
- The topic ‘Widening the Header’ is closed to new replies.
WordPress.com Forums 