Problem with Sticky Headers

I am trying to create a custom header in pro. I have tried everything and this “sticky header” is bouncing. Here is what I would like to accomplish:

On scrolling the sticky header stays sticky without any bouncing. Row 1 is sticky, row 2 (header and nav bar) are bouncy. I have tried making one or the row absolute. Now they are both absolute but the behavior is the same–bouncy 2nd bar.

I also would like to make the background dark gray and semi transparent on scrolling. What is the css for that?

Here is a page that you can see the header in action: http://www.cherylbenard.com/arch/projects/standwithnineveh/

I am running the latest version of Pro in Wordpress 5.2.2 and php 7.2

Thank you.

Hello @kcostellomak,

Thanks for writing in!

The height of your second bar is the same as the height of both bars. They should have its own bar height. You may also set up one bar as relative and the other is absolute or vice versa. If nothing helps, would you mind providing us the url of your site with login credentials so we can take a closer look at your custom header?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Thank you. I have tried all the suggesions you mention. Please help. I attached a secure note to my earlier message with login info. I’ll see if I can add it here as well.

Many thanks!!!

Hello @kcostellomak,

Please be aware that the bar will need to reach to the top of the page before the sticky bar will be triggered. This is why it is not recommended to have two sticky bars at the same time because they don’t be triggered at the same time. This is a known issue when you use multiple bars and you have a sticky bar at the bottom and the top bars are hidden. For now, you will need to use only 1 bar as sticky. You need to design your menu in such a way that they will fit in 1 sticky bar. The screencast below is also an example of this application where you hide an element then show another one in the same container.

Hope this explains it briefly.

Hi @kcostellomak,

To add context on this, you need to place that topbar (containing 3 buttons) inside the bar that contains the logo and navigation menu as a 3rd container. This way you’ll only have one sticky bar.

And then duplicate that bar, change the duplicate bar background-color to black and turn off the Sticky Bar option on the original bar.

Now you should have 2 bar with the same content, one is a sticky bar and one is a static bar. That is how it should be. Please see the Copy of arch3 header for your reference.

That double scrollbar issue that you’re seeing on your page is caused by your footer bar height, please set that bar’s height to auto

Thanks,

It looks beautiful. Is there not a way to simply have it be fixed instead of the slide down effect? Such as in the original custom theme I am recreating in x-pro (archinternational.org)

Can you quickly tell me the setting for getting containers both side by side and stacked within the same row? I was creating new rows unnecessarily both in the header and footers.

Thank you SO MUCH for your help!

Hello @kcostellomak,

You can simply create one bar and make it sticky. In this bar, you will insert two containers. One for the left which will contain the logo image and the right container will contain the two navigation inline element stack on top of each other. To better illustrate my suggestion, please check out my test header and see it in action in the link provided in the secure note.

The “give” menu item has been given a custom class give-button and then I used this custom css:


.give-button .x-anchor.x-anchor-menu-item {
    background-color: rgb(253,139,41) !important;
    box-shadow: inset 0em 0em 0em 1px rgb(253,139,41) !important;
}

.give-button .x-anchor.x-anchor-menu-item .x-anchor-text-primary {
    color: #fff !important;
}

.give-button .x-anchor.x-anchor-menu-item:hover {
    box-shadow: inset 0em 0em 0em 1px rgb(16,161,214) !important;
    background-color: rgb(16,161,214) !important;
}

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.