Sridhar Katakam

Genesis and WordPress Tutorials

Utility Bar in Altitude Pro

by 10 Comments

In the comments section of How to make Utility Bar and Header fixed in Minimum Pro tutorial, a user asked:

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?

Like in the tutorial on Minimum Pro we shall wrap utility bar and site header in a custom div.fixed-header and adjust Altitude Pro's style.css to make utility bar + header fixed.

Step 1

Add the following in Altitude Pro's functions.php:

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

Already a member? Log in below or here.

  • Hi Sridhar,
    This is awesome. I’m working on customizing a site that’s in development right now and needed something like this. Thanks for the great tutorial.
    Kary

    Reply

  • It’s kinda janked straight out the box.

    both right and left widget areas are width 100%. with float: none;
    Both are float non.
    Both have excessive bottom margin (30px)

    Seems there’s other stuff, but it could just be me/my-server

    Reply

  • Hi Sri,

    Great guide! Thank you for the clear instructions. I successfully added a utility bar fixed at the top with your guide. I have some issues when adding submenu to the menu header. The formating no longer seem to work on the submenu.

    Also, is there a way to make the utility bar transparent in the beginning and turn solid black like the menu header? Thanks!

    Reply

  • I love the utility bar tutorials Sridhar. Is it possible to create one for Atmosphere Pro on desktop and mobile as well, or is that not possible?

    Reply

  • As always, I appreciate your great contributions to the Genesis theme world! The instructions and code worked perfect!

    Reply

  • Fantastic tutorial, thank you.
    I added
    .fixed-header.dark .utility-bar{
    display:none;
    }
    Then the utility bar shows when first land on the page and disappears when you scroll down the page.

    Reply
    • >