In the comments section of How to make Utility Bar and Header fixed in Minimum Pro, a user asked:
Hi ,
I am using the latest version: version 3.2.1, purchased May 18, 2016
For background information purposes, what I am trying to do is to have a fixed utility bar (as per Carrie Dills) with a fixed header. I want a responsive image and I want a Genesis header with logo, primary nav and social icons in line with the logo in the header.
I have used your information to generate the responsive image. I was not able to overlay a text widget over the image as per your code (I created the widget but it failed to overlay over the image.). I gave up on that and added the content to the image via Photoshop.
I added the utility bar as per Carrie’s instructions but I cannot get the header working, nor can I get the logo to show properly. The logo and the nav is covered by the utility bar. For reference, the site in question is http://www.jtrac.ca.
This tutorial covers the following customizations to Minimum Pro v3.2.1:
- add a Utility Bar and make it along with the site header fixed
- add an inline logo
- remove Header Right widget area and relocate Primary Nav to header
- register a custom Nav Social Menu widget area and display a Simple Social Icons widget placed in it inside the header
- wrap Primary Nav and Nav Social Menu inside a div.nav-social and float it to right
- replace the fixed backstretch image with a regular full width responsive image
- register a custom Home Below Header widget area and overlay it centered on the above image
Step 1
Edit functions.php.
a) Replace
Hi Sridhar,
Thank you very much for this information. It is extremely helpful. I have been working through it in detail for the last two days and I am still having some issues:
1. If I replace your code for the background image
$image = get_option( ‘minimum-backstretch-image’, sprintf( ‘%s/images/JTRAC_Splash_Background_WithTagline.jpg’, get_stylesheet_directory_uri() ) );
if ( empty( $image ) ) {
return;
}
with
// If Background Image is not set, abort.
if ( ! get_background_image() ) {
return;
}
// Display the background image.
echo ”;
This will allow me to use an uploaded image as a main image but it does not work with the positioning of the widgets. Your code works well with an image already uploaded to the images folder. Is there any way to be able to use uploaded images in the Media section of the site for background images?
2. On larger screen sizes, anything over 600px in width, the home-below-header falls inside the background image. Is there a way to ensure it always falls below the main image?
3. I cannot seem to get the logo or the social icons to display at all. I uploaded the logo to the media section of the site and it even shows in Customization, header section, as an image but it does not display on the site at all. The logo is a png file.
4. I am not sure if the Header right area is being removed or if it is a matter of updating the structural wraps but it still shows in my Appearance ->widgets area.
5. I have an After Entry widget whereas you do not. Does this need to be removed as well?
6. The new widgets created fall below the footer widgets for me. They are not in the same order as you show. Is this important?
1.
My code already does this. To change the main image, go to Appearance > Customize > Backstretch Image and select/upload your desired image.
2. Change http://pastebin.com/raw/aggqmcF6 to http://pastebin.com/raw/AvnUVB54
3. Can you provide the URL of your site?
4.
unregister_sidebar( 'header-right' );should remove it from appearing at Widgets as well. If it’s still appearing double check your code and make sure the above line is present in functions.php.
5. It is optional and depends on your site requirements.
6. No. The order in which they appear at Appearance > Widgets is the order in which their register code appears in functions.php. It is only for organizational purpose.
Will this utility bar work with child themes like Altitude Pro? Talking about those child themes that have a shrinking header feature when you scroll down It seems to interfere when adding Sticky Message (BTW, thanks for the new tutorial fixing this). Wondering if this utility bar will have the same issues with shrinking header themes?
There’s really no difference between a sticky message widget area and utility bar widget area. Utility bar has left and right sections which can be set up in the sticky message widget area as well.
Hi Sridhar,
Regarding the issues …
Please note I am using a static home page.
1. When I upload the image as a background image via customize, the image does not appear on the site at all. It will only appear if it is uploaded to the images folder. I have inspected the site in Chrome and the image does appear in the code as follows:
It appears that the code is loading the image from the images folder rather than the uploads folder and since there is no image there, nothing loads. The image does reside in the uploads folder though. When I add the image to the images folder, it does appear. Am I missing something in the code?
After playing around with priorities I did manage to get the image to display from the uploads but it is not responsive and there is this icon displaying over the image. I am at loss as to what is going on here.
2. The code change did not help in terms of where the below header widget appears. It still overlays over the image.
3. The logo is not displaying at all. The url of my site is http://www.jtrac.ca
4. I have done as instructed and the Header right widget still apears in the Appearance ->widgets area.
Hi Sridhar,
I have managed to remove the Header Right widget from the Appearance ->widgets area. I have also managed to resolve the below header widget issues. The only items outstanding are the background image and the logo. I am still struggling with those.
I can take a look inside your site and fix.
Please send me the WP and FTP logins via https://sridharkatakam.com/contact/.