Sridhar Katakam

Genesis and WordPress Tutorials

How to make Utility Bar and Header fixed in Minimum Pro

by 39 Comments

Carrie Dils has a great tutorial on adding a Utility bar above the header in Genesis here. When this is implemented in themes like Minimum Pro that have a fixed header, as the page is scrolled down a gap equal to the height of utility bar will appear above the fixed header and the bar goes off the screen.

utility-bar-minimum-pro

To remove the fixed behavior of the header, this CSS can be used:


.site-header {
	position: static;
}

But what if you want to make the utility bar plus the header fixed like in the screencast below?

Screenshot:

fixed-utility-bar-header

Here's how it can be done.

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar

    unbelievably I’m working on your previous post (along with a post by Robin Gale Cornett). Then I decided to add Carrie’s utility bar and was working on fixing the header and utility bar! Spooky.

    Here is the site I’m working on wetnosepatrol.com. The header and bar are fixed but when I scroll they jump to the left instead of staying centered.

    Bill

    Reply

  • Great article. I’ve been able to add the utility bar, but when I scroll down the page, it jumps up a little, then settles back down. This happened for a couple of in production sites. So i created a new one from scratch with no plugins or modifications – except for or edits listed on this page and the one from carriedils. I changed a couple of colors just to see the area more clearly. My temp page is http://axmar.com/blog2/. if anyone can help me, I’d greatly appreciate it. Thanks.

    Reply

  • I done some more testing on multiple devices and browsers. Sometimes I see the jump space, sometimes I don’t. Factors that affect it are being logged in or not, tablet vs. laptop, size of screen and resizing that screen. Any ideas?

    Reply

  • Great post! I’ve added this function and it works. However, Ive also added the functions in your “Overlaying text on background image in Minimum Pro” post.

    Upon adding the Utility bar, it is causing the text overlay to scroll with the page. Any ideas?
    lumecloud.com

    Thanks

    Reply

  • Hi Sridhar,

    Your tutorials helped me a lot in setting the Genesis Fwk, I’m trying to achieve the result presented in this tutorial and for some reason the result is not the one that I expected, my header sometimes won’t stay fixed, while I’m scrolling the page you can see that the header is a mess.

    Reply

  • Thanks for all your work on these awesome tutorials. I do have a question. I am using the minimum theme and have used your tutorial to add a slider to the minimum theme. I was also adding the utility bar at the top but as I scroll down the the slider actually stays fixed after I added the above code. Before that the slider moved out of view as it was suppose too do. Not sure if you can help as I do not have the site live at the moment

    Reply

  • Sridar:

    Great post. Thank you. I’ve implemented it in Parallax Pro but I’m also getting the white blip jump when scrolling up before it settles in.

    Is there a fix you know of that you’d be kind enough to share?

    Here’s the site:

    10×10 Academy

    I’m trying to get the MTD Earnings to show above the nav menu top right.

    Reply

  • Hi Sridhar,
    I’ve been trying to add this bar to the Altitude Pro theme. I’ve tried all the tweaks suggested by Carrie but none work. The bar falls under the header/primary menu instead of on top of it. Do you have an suggestion as to make this work on Altitude Pro?

    Reply

  • Hi,

    I have followed the code as indicated but the utility bar does not show up on my site. It shows up when I do inspect of the page in Chrome but it doesn’t show up normally. Furthermore, I now have a custom sticky header as well as the standard Minimum Pro header but the custom sticky header has 0 height. I apologize for my lack of knowledge but I am not sure why the code is not working for me. Any suggestions would be greatly appreciated. Thank you.

    Reply
    • >