I am an independent WordPress web consultant with 10 years of experience in WordPress theme installation, customization, administration, maintenance, support, documentation, troubleshooting and PSD/design to WP.
Sridhar, thanks! It worked for me!
I also want to replace top submenu to right of the logo in header widget area (where now search field)
I used this code to place subnav in header widget area
add_action(‘genesis_header_right’,’genesis_do_subnav’,16);
But I can’t remove the top submenu! Can you halp me with it?
Thanks
great tutorial, I just have a question. How Can I do in order to put the nav menu options allign with the site container and not totally wrap.
As you can see on my website the menu and header are wrap but not the menus items.
Thank you in advance
Got it.. after assigning custom menus and copy your css.. look fine..
But, when i change theme color to blue/red/green. it’s doesnt work. If default theme, it will work.
Is that true?
Yes, possible. But unfortunately I can’t provide with the specific similar code on how to do that. I want to concentrate on current newer themes rather than the old ones for publishing posts in this blog.
I have made changes in functions.php of child and parent theme then it got corrected..anyways thanks for your support.
Hi!
Do you have a tutorial on how I can make a full width header (goes across the whole screen) … I can’t find any of the pieces of code you are talking about here. I am using the Runway theme.
Is there a way to use both a header graphic and a (repeating) background image to create a full width header? A solid hex color doesn’t look right – I need a graphic to continue the design of the 960 x 170px header image I created.
I am either getting the background image repeating the entire length – with no header graphic in the center area – or the header will appear and pull the default background image rather than the one I uploaded and pointed to (in the same images file as the default that came with the child theme).
Hi, it´s me again, it really worked, i was putting the code BEFORE the parenthesis instead of after the last parenthesis in the function.php file, thanks my site looks great now
Excellent tips! I got this to work with a few minor adjustments on the Executive Pro theme with the exact result I was looking for. Thanks for sharing!
Great tips! Started to try to use them to achieve what I want, but it’s not getting anywhere. Any idea how to make the header section the full-width of the template, but not the content area? If I adjust the padding, it affects the whole site. I’m also trying to make the logo overflow onto the menu with no luck. Any thoughts?
Thanks for the great info! I’m very new to this, but my only questions is this: When I tried changing the color code for the body: background and nav-primary, I saw no change and they are still transparent, showing my background image. Any idea what I’m missing? Thanks in advance.
Thanks for this – do you know what I would need to edit to leave the header intact but to make the main navigation stretch across the width of the site container?
I was looking for how to do this for my niche site and it worked perfectly! I can’t thank you enough for this tutorial.
But is there any way to reduce the white space below and above the header. I want the header to be very slim.
[…] duda por favor déjamela en los comentarios espero te guste y disfrutes este tuto. Referencia: https://sridharkatakam.com/full-width-header-navigation-metro-pro/ jQuery(document).ready(function($) { $('#googleplus-after-857').sharrre({ share: { googlePlus: […]
Sridhar, thanks! It worked for me!
I also want to replace top submenu to right of the logo in header widget area (where now search field)
I used this code to place subnav in header widget area
add_action(‘genesis_header_right’,’genesis_do_subnav’,16);
But I can’t remove the top submenu! Can you halp me with it?
Thanks
Comment out or delete
add_action( ‘genesis_before’, ‘genesis_do_subnav’, 4 );
Is there a way that the full width header and navigation can then be fixed at the top?
Yes.
Do you want all the 3 sections i.e., primary nav, header and secondary nav to be fixed?
Hi. If I wanted to fix the primary nav as it scrolls up (hits the top and then stays) what code would I use. Many many many thanks in advance.
great tutorial, I just have a question. How Can I do in order to put the nav menu options allign with the site container and not totally wrap.
As you can see on my website the menu and header are wrap but not the menus items.
Thank you in advance
Add this CSS:
.wrap {
max-width: 1000px;
}
I think its not working in correct manner in responsive design. Check your site in viewport !!
Can you elaborate? What is not correctly working/appearing?
On smaller devices it looks like unwanted space is popping out.
http://i.imgur.com/UJFwtDh.png
Thanks for the annotated screenshot Aditya. I checked my site in iPhone and do not see the problem seen in the screenshot.
320px wide (Portrait): http://i.imgur.com/otxUGqT.png
480px wide (Landscape): http://i.imgur.com/Ze5pbAx.png
Just following the instructions, but not working with me..
This the screenshot :
http://i.imgur.com/I83a71i.png
Thanks 🙂
You might want to first do the theme set up like assigning custom menus to Primary and Secondary Navigation Menu locations. Follow http://my.studiopress.com/setup/metro-theme/
Got it.. after assigning custom menus and copy your css.. look fine..
But, when i change theme color to blue/red/green. it’s doesnt work. If default theme, it will work.
Is that true?
Possibly. I haven’t tested the code with the color variants.
Hi, thanks for the great site. Is there a way to make the full width header and nav work with metro 1.0?
Yes, possible. But unfortunately I can’t provide with the specific similar code on how to do that. I want to concentrate on current newer themes rather than the old ones for publishing posts in this blog.
If you would like me to work on it for a fees, see http://www.sridharkatakam.com/services/
grest post…need help. i would like to change the font of post titles which are too…struggling from last 7 days but could not find anywhere…pls suggest
Add this at the end of style.css: http://pastebin.com/raw.php?i=0yanDSGf
Hi, I have updated but still font size is same (very large)
Looks fine to me at http://www.nitinbhatia.in/
I have made changes in functions.php of child and parent theme then it got corrected..anyways thanks for your support.
Hi!
Do you have a tutorial on how I can make a full width header (goes across the whole screen) … I can’t find any of the pieces of code you are talking about here. I am using the Runway theme.
http://129.121.133.196/~southe10/
Thanks!
Kendra
See https://gist.github.com/srikat/7940166
Add the PHP code at the end of functions.php. Replace the image URL with your desired full width header image.
Add the CSS code at end of style.css.
Great tutorial – thank you.
Is there a way to use both a header graphic and a (repeating) background image to create a full width header? A solid hex color doesn’t look right – I need a graphic to continue the design of the 960 x 170px header image I created.
I am either getting the background image repeating the entire length – with no header graphic in the center area – or the header will appear and pull the default background image rather than the one I uploaded and pointed to (in the same images file as the default that came with the child theme).
Thank you!
Please provide
a) URL of what you’ve got so far
b) A screenshot or design mock-up of what you are trying to do
c) URLs of header image and repeating background image
Hi, it´s me again, it really worked, i was putting the code BEFORE the parenthesis instead of after the last parenthesis in the function.php file, thanks my site looks great now
Excellent tips! I got this to work with a few minor adjustments on the Executive Pro theme with the exact result I was looking for. Thanks for sharing!
Very Helpful! Thank you very much!
Would this work on Lifestyle Pro? What would need to be modified?
Great tips! Started to try to use them to achieve what I want, but it’s not getting anywhere. Any idea how to make the header section the full-width of the template, but not the content area? If I adjust the padding, it affects the whole site. I’m also trying to make the logo overflow onto the menu with no luck. Any thoughts?
Here’s an image for reference:
http://creativecali.com/images/metro-header-issues.jpg
Thanks for the great info! I’m very new to this, but my only questions is this: When I tried changing the color code for the body: background and nav-primary, I saw no change and they are still transparent, showing my background image. Any idea what I’m missing? Thanks in advance.
HI
How do I remove the background colour of the logo on the theme. So it only shows text like yours?
hi, great site super stuff.
when i do this i get this white space where probably it should be wrap.png and subnav.png.
i added these two images in the genesis >> image folder and metro pro >> image folder.
am i dont somthing wrong.
do let me know please.
Add the missing closing brace above
/* Custom styles by Sridhar */
in style.css.
hi sridhar.
sorry to bother you again. I did that. but still css wont load the wrap.png and subnav.png. please take a look here. tsmplay.com
here is the url to my problem
http://i.imgur.com/w2HLinR.png
Does this still work?
I can’t download the 2 files. 🙁
Ok this still works, i just created the 2 images myself 🙂
Cheers.
Hi Sridhar,
Thanks for this – do you know what I would need to edit to leave the header intact but to make the main navigation stretch across the width of the site container?
So that it looks like:
http://oi61.tinypic.com/t6dr1s.jpg
Hey,
This worked great on my site, the only issue I have is that my landing page template is now showing the header and menus too.
What do I need to change so it doesn’t show under landing page template?
Thanks a lot!
How to put image in this navigation Menu
I was looking for how to do this for my niche site and it worked perfectly! I can’t thank you enough for this tutorial.
But is there any way to reduce the white space below and above the header. I want the header to be very slim.
Hello,
Although this works perfectly, but I just found out that the images on the site are not longer working. Is there anyway to fix it?
I will be waiting for your reply.
Thank you!
[…] duda por favor déjamela en los comentarios espero te guste y disfrutes este tuto. Referencia: https://sridharkatakam.com/full-width-header-navigation-metro-pro/ jQuery(document).ready(function($) { $('#googleplus-after-857').sharrre({ share: { googlePlus: […]