WP-Topbar and Divi Theme by Elegant

You wrote: ‘The only way I could get it to show up at all was to add….’ That makes sense. You will need to customize the CSS to account for your themes and styling.

You wrote that it ‘doesn’t consistently display’. I tried your page, https://loneoakfbc.org/wp/?page_id=56, multiple times on multiple browsers, operating systems. I continually shows up.

You wrote that it does not ‘respond to resizing’ I am not sure what you mean. I use this Chrome extension (https://chrispederick.com/work/web-developer/chrome/). It has a “Resize | View Responsive Layouts” option. That shows that the TopBar consistently resizes itself to different browser sizes. Is that what you mean? Or ????

Bob

Ah, customizing the CSS to account for Divi is indeed the issue.
As to consistency; A portion of the Topbar gets cut off on some views, that is dependent on the “Top” parameter, but varies just enough to make it inconsistent.
As to responsiveness; as you size down the browser or use iPad/iPhone, the top bar does resize properly, but it doesn’t push down the page content and as such it overlays more and more page content as the viewpoint gets smaller. I’m sure that is related to the absolute positioning and it’s “out of line” placing.
All of this indicates I am working around the problem instead of solving it – I need to identify the root problem – that will take time.
Your response indicates to me that there is no known history with Divi or this problem with Divi, so no “been there done that” quick fixes. I’ll have to do a lot more playing to see why the Topbar Div is not being loaded in the proper flow of the page.
Thanks for the reply, if you find something relative to Divi, let me know. And if I find a definitive solution, I’ll let you know.

Thanks — let me know.

Hey Loneoakfbc,

I’ve setup WP-TopBar on a new site I’m working on that also uses the Divi theme.

You can check it out here: https://clearpathbycindy.com/test
I had to play with the theme customization settings to get it to work properly.

Make sure in the Divi theme options, under navigation, you have each category and page turned off or “X’d” out. If not, they will encroach on the topbar space and make it hard to see.

Also, under theme customization, under header format, I used “default” header style and checked the box for “hide navigation until scroll”.

Under primary menu bar, as well as fixed navigation settings, I used “hide logo image”.

No header elements were used either.

For a menu, I made a custom menu and included it in a “full width menu module” in Divi. Then I added a sticky menu plugin to have the menu stay at the top of the page when scrolling.

Hope that helps!