Community Forums › Forums › Archived Forums › Design Tips and Tricks › Looking for some help with the header area in News Pro
Tagged: header, newspro, responsive ??bug
- This topic has 2 replies, 2 voices, and was last updated 10 years, 4 months ago by kichigai.
-
AuthorPosts
-
December 24, 2013 at 1:00 am #81029kichigaiMember
I am a total neophyte with reading and interpreting CSS and PHP code so I am hoping that someone can help me with some pointers on how to address some problems I am having with the site that I am developing for my wife’s travel blog. To understand my questions you might need to look at the site – http://sixlegswilltravel.com.
1. I figured out how to adjust the size of the header and I thought it was going to fit across the entire page but it seems not to go all the way to the left margin. How do I find the actual width of the page so I can adjust so the header fits all the way across?
2. On the top and bottom of the header there is white space between the header block and the menus – I would like to be able to eliminate or significantly reduce the white space so the menus are in close proximity or touching the header block
3. I had just started with News when News Pro came out – I switched because it was supposed to be a responsive theme. It does seem to work fine on my iPhone 4S but when I pull the site up on my iPad (retina display but iPad3) the header truncates on the LHS in landscape mode and on both sides in portrait mode.
Wondering if anyone can point me in the right direction to get these issues resolved
Many thanks in anticipation
Simon
December 24, 2013 at 1:41 am #81032Brad DaltonParticipant1. Firstly, you'll need to add the first block of PHP code from this post at the end of your child themes functions.php file http://www.carriedils.com/customize-genesis-move-header/2182/
Then you'll need to increase the min-height value in this code from 90px to the height of your header which in this example is 200px. You'll find this CSS code on Line 1062 of our child themes style.css file.
.header-image .site-title a { float: left; min-height: 200px; width: 100%; }
2. You can also remove this CSS code which adds the white space (padding). You'll find this code on line 1004 of our style.css file.
.site-header .wrap { padding: 40px 0; padding: 4rem 0; }
After you do this, you can then add your header image.
If you use the Custom Header functions under Appearance > Header, you will need to change the values to match you header image in this PHP code which you'll find in your child themes functions.php file on line 35:
//* Add support for custom header add_theme_support( 'custom-header', array( 'header_image' => '', 'header-selector' => '.site-title a', 'header-text' => false, 'height' => 200, 'width' => 1140, ) );
There's other ways to add your header image including using CSS and PHP code.
3. Once you have your header image working the way you like, then i suggest you start a new topic for your 3rd question.
December 25, 2013 at 8:56 pm #81208kichigaiMemberBrad:
Thank you for your very comprehensive response - I followed through with each of your suggestions and found the following:
The code added to the function.php did something rather unexpected as it moved the header from between the two menus to above the upper menu. While I have used this sort of format on another website that I put together I actually quite like what News-Pro did with the header sandwiched between the two menus. So after looking at that effect I decided to delete that code again. But I will certainly keep it in mind for another website that I have in mind to create when I can get this current one right.
I followed up with your other suggestions and now have the header with the two menu closely banding the header as I had imagined it and in my opinion looks great getting a contrast between the dark brown of the menus and the parchment color in the header.
Thank you for helping me to get this part sorted out. I will be following up with some additional questions regarding the responsiveness for an iPad once I get a bit further with some of the other design features I am trying to achieve.
Simon
[email protected] and currently working on sixlegswilltravel.com -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.