"info bar" with Convert Plus extension overlaps my website's fixed menu

I’m using the “Convert Plus” X Extension, specifically the “Info Bar” option.

How do I make the info bar appear above my site’s header instead of overlapping it?

I see there’s a “push page” option in WP Dashboard > Convert Plus > Info Bar > (info bar title) > Design > Advanced, which I’ve checked off:

…but all it does is leave a blank gap below my header:

Further, I see this notice below the “Push Page” option:

it looks like it’s advising to set my site’s “fixed header class / id” and/or “top offset class / id” as shown here:

Do you know what I should be entering here? In Chrome Inspect I can see “x-masthead” so I’ve tried entering that but no changes took place.

site: https://tinyurl.com/yclvgtmx

Thanks

Hi @armintz,

Thanks for writing in.

You could try adding this class below in your Push Page.

.x-bar.x-bar-top.x-bar-h.x-bar-absolute

Let us know how it goes.

Thanks.

Adding this to the 'Fixed Header Class / ID" field has the same results as the screenshot in my previous post (the one with the blank gap appearing below the header).

Adding this to the “Top Offset Class / ID” field seems to work nicely when the page first loads, but as soon as you start scrolling down the page, the Info Bar / alert is covering the header area again:

Hey @armintz,

What happens is, the header bars are positioned fixed when you scroll down the same as the info bar. Please try using .x-bar-fixed in “Fixed Header Class / ID”.

If that doesn’t work, the solution would be to override the top position of the bars when they’re fixed. See https://youtu.be/aeAmgdc8Hkc. Here’s the CSS code in that screencast. PLEASE NOTE though that, for demonstration purposes, I’m using the dynamic classes here like e723-1. You should assign your own class to each of your bars and replace those dynamic classes as they will be changed when you add another bar or reposition the bars. Alternatively, rather than assigning your own CSS, you can use the Element CSS.

.e723-1.x-bar-fixed {
    top: 1px !important;
}

.e723-11.x-bar-fixed {
    top: -1px !important
}

Hope that helps.

unfortunately .x-bar-fixed did not fix it.

thanks for the video, it looks like you were able to get it to work nicely in that demonstration.

I’ve tried the css you referenced below (as this seems easier than assigning classes) but it’s still not behaving like it does in your demo video:

.e723-1.x-bar-fixed {
    top: 1px !important;
}

.e723-11.x-bar-fixed {
    top: -1px !important
}

it’s not a caching issue as i’ve cleared both browser and server side cache.

The code would work provided you implement it correctly or there are no syntax errors with your other CSS. You can test your custom CSS for syntax errors here.

Also, I said previously that I used dynamic CSS for demonstration purposes only. It is not recommended be used permanently.

Thanks.

“You should assign your own class to each of your bars and replace those dynamic classes as they will be changed when you add another bar or reposition the bars.”

Can you elaborate on this process please? Thanks.

Hello there,

What my colleague was trying to say is that it is a MUST/best practice to add a custom class per bar as dynamic classes like .e723-1 are just theme generated classes and can be overriden on theme updates.

I’m not sure if you’ve added these but I can see you have bars with classes named topmenubar and mainmenuboldlinks. We can already use these classes for our CSS code instead of adding new ones per bar. Please check the updated code below:

.topmenubar.x-bar-fixed {
    top: 1px !important;
}
.mainmenuboldlinks.x-bar-fixed {
    top: -1px !important
}

Hope this helps.

i’ve added this below to my global css and unfortunately the menu is still behaving erratically.

.topmenubar.x-bar-fixed {
    top: 1px !important;
}
.mainmenuboldlinks.x-bar-fixed {
    top: -1px !important
}

Hey @armintz,

You still need to use the Top Offset Class.

It now works. See https://youtu.be/mozVdULbV8Y. Just note that this solution does not take into account the WP admin bar so you will see that it will not work when the admin bar is present.

By the way, I disabled your ShiftNav plugin while investigating this because it gets in the way.

Hope that helps.

Thanks, it works but still behaves sort of erratically. For example, if you try to change the size of the browser window, the header jumps downward, and even disappears on occasion. I can duplicate the issue in Chrome, Firefox, and Safari.

Why does this happen?
Thanks

Hello there,

It is because Top Offset Class is generating a CSS code which pushes the menu down with margin-top code.

Kindly add this code into Pro > Theme Options > CSS:

.x-bar.x-bar-top.x-bar-h.x-bar-absolute {
    margin-top: 52px !important;
}

Hope this helps.

It’s close, but when you close the notification bar (by clicking the ‘X’ on the right side) the header stays in place, leaving an awkward padding at the top of the site:

Hello @armintz,

Thanks for updating the thread. :slight_smile:

Can you please reload the page again? It’s now working fine on my end. Please clear browser cache before loading again. https://cl.ly/31140D3a450X

Thanks.

Still not working:

I’ve cleared browser cache, cleared server cache, and tried this on both my iMac and PC.

Mac: Chrome, Firefox, Safari, Opera
PC: Chrome, Firefox, IE, Edge

I’ve also tried a proxy to be sure, as well as making small changes on the website to ensure I’m looking at the latest version and not a cached version.

Can you try in a different browser or have a colleague look? Thanks

Hey There,

I can see the info bar. When you close it, there is a space above the page. This is because of the code given by Jumar. please remove this code:

.x-bar.x-bar-top.x-bar-h.x-bar-absolute {
    margin-top: 40px !important;
}

Clean your site caches and test it again.

.x-bar.x-bar-top.x-bar-h.x-bar-absolute {
    margin-top: 40px !important;
}

Removing this code causes other issues that have already been discussed in this same thread. For example, if you clear cache and try it now, if you resize the browser window a tiny bit while the notification bar is still open/active, the entire top header jumps all over the place - usually right off the page:

I appreciate the support responses but this seems a bit crazy…

Your header menu has a a static option, and this extension has a static option - presumably many of your users take advantage of these default settings… why does this require so much custom coding for them to work together? :unamused:

Hello There,

I have made some changes in your ConvertPlus Settings.
1.) http://prntscr.com/j5s197
2.) http://prntscr.com/j5s1fj

Please check your site now.

Okay, I checked the site and after clearing browser and server cache, the menu still jumps all over the place, usually off the screen.

Hi there,

The problem is that you want to customize the behavior of the ConvertPlus item with the Pro header while both of them are set to be fixed. This will cause the issues you already experiencing. Now all the CSS codes given are to force the header to go down to make room for the Info Bar.

But now the problem is that the Pro header does not know when you will click and the info bar will be closed. Because those entities (Info Bar and Pro Header) are different ones and not interconnected.

I suggest that you consider having a completely different approach:

  1. Go to Pro > Global Blocks and add a global block containing the Alert Element. Try to style that alert box like the ConvertPlus Info Bar.
  2. Go to Pro > Headers and edit the header in question and add the Global Block element which you have already created at the top of the header:

Now the difference is that by this method you will add an Alert Element (Instead of the Info Bar) which is inside the Pro Header and part of it. That is why as soon as you click on the X icon of the Alert Element, the whole header will go up and fill the empty space because the header is aware of the Alert Element.

Hope I could give you a good alternative on this case. Thank you.