Header Problems
-
Hello! I am trying to center and widen my custom header on yumblog. I’ve looked at other threads, but I can’t seem to get mine to work. Can someone please assist? The CSS that I have been trying to use is below:
#header #headimg {
float: none;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
max-width: 325px;
}.tertiary-actions {
width: 100%;
}#menu-social {
float: left;
margin-left: 10px;
}havenandhoney.wordpress.com
The blog I need help with is: (visible only to logged in users)
-
In this case, I think the problem is the image you’ve uploaded is too small. The theme expects a header image 385×138 pixels–which is the size of the header image you have now, but if you want it to go all the way across the top of your site you’ll need a bigger image. Try uploading an image with a width of 1120px. instead. Be sure to chose “don’t crop” or “skip crop” when the uploader tries to get you to give it an image the size it is expecting.
That might solve the problem on its own, but if it doesn’t, or if your theme won’t let you upload a larger image let me know and we’ll try something else.
Also, remember that YumBlog is a Premium theme so if I can’t help you (or you get bored with me) you can also get help directly from the theme designer here: http://premium-themes.forums.wordpress.com/forum/yumblog
-
Thank you. My original header size is 973×244. When I try to upload the image, it forces me to crop it down to the smaller size. I don’t have the option to “don’t crop” or “skip crop” after I select my image in the uploader.
-
Thank you. My original header size is 973×244. When I try to upload the image, it forces me to crop it down to the smaller size. I don’t have the option to “don’t crop” or “skip crop” after I select my image in the uploader.
-
Ok, I believe this will work, but it’s a huge hack and might create problems I’m not anticipating. but give it a try, if it’s terrible, you can just take it out:
#headimg img{display:none;} .tertiary-actions{ height: 244px; width: 976px; background-image:url('http://havenandhoney.files.wordpress.com/2014/07/cropped-cropped-havenandhoney41.jpg'); }I just used the image you sent me, but for this to work properly you’ll need to upload a full sized version of your header to your media library and replace the link inside image: url with the link to the full sized header image.
If the search bar interferes (and it most likely will you can remove it like this:
.tertiary-actions .search-form{ display:none !important } -
Thank you! It looks good on the web version, but on the mobile version and the tablet/iPad version, it doesn’t resize.
Any tips to get it to auto resize or should I contact the Yumblog creator?
-
This should help–it gives small screens different instructions:
@media screen and (max-width:1020px){ #headimg img{display:inherit !important;} .tertiary-actions{ height: inherit !important; width: inherit !important; background-image:none !important; } } -
Also, I noticed your image isn’t quite big enough to fill the whole space, so if you wanted to center it you could replace the second part of the first bit of code I gave you with this:
.tertiary-actions{ height: 244px; width: 1120px; background-image:url('yoururl'); background-repeat:no-repeat; background-position:center; } -
Liz,
I still can’t get my tablet and mobile versions to scale down the header. Here’s the CSS that I have for the tablet and mobile versions. What am I doing wrong?
@media screen and (max-width:1020px) {
#headimg img {
display: inherit !important;
}.tertiary-actions {
height: inherit !important;
width: inherit !important;
background-image: url(‘http://havenandhoney.files.wordpress.com/2014/08/havenandhoney_new-3.jpg’);
}
} -
This is the code you need to make the header work on phones on tablets:
@media screen and (max-width:1020px){ #headimg img{display:inherit !important;} .tertiary-actions{ height: inherit !important; width: inherit !important; background-image:none !important; } }Note: it looks like you removed the small version of the header from the site. You need to add that back in order for it to show up on tablets. Just re-upload it like you did the first time, and then add the code above to your CSS box.
The small header will be hidden on large screens and will show up again on small screens.
-
Do you still need help here? I checked http://havenandhoney.com/ at small screen widths and I didn’t see the header. Looks like it’s because you haven’t added one back in the Appearance > Header page as lizthefair suggested, so maybe you just haven’t gotten to it yet.
I noticed there is another similar help request at https://en.forums.wordpress.com/topic/help-widening-the-header-on-yumblog?replies=7 in case that is also helpful to you.
I also noticed that your home page is displaying a “nothing found” message. That’s happening because you have only published one post so far and the home page in Yumblog needs at least two for the featured content slider to start working. To fix it, you can simply publish one more post and add the “Featured Posts” tag to it since that’s the one specified in the Appearance > Customize > Featured Content section in your blog. I hope you add a few more posts because I’d love to see them! And also because I love food blogs and yours looks like it has good potential. :)
Aside: I totally love the image in your sidebar. It’s really sweet!
- The topic ‘Header Problems’ is closed to new replies.
WordPress.com Forums 