• Resolved Mike Costanzo

    (@mikecostanzo)


    Hi there,

    I’m having a problem with the Sticky Bar not applying the correct styles on Mobile screen sizes in Divi. As you know, the Plugin uses Javascript to apply a dynamic style to the HTML document itself (for example, “margin-top: 36.7756px !important”), and then also applies the inverse of this value to the site’s header element (which, in the case of Divi, is .mysticky-welcomebar-apper.et_fixed_nav #main-header).

    On Desktop and Tablet sized screens above 768px, these styles appear as normal. However, on mobile screen sizes of 767px and below, the header element CSS styles are NOT being applied, which results in the My Sticky Bar overlapping with and obscuring the header, as well as extra space below the header.

    While I COULD in theory write 2 different styles that target .mysticky-welcomebar-apper.et_fixed_nav #main-header, these styles would have to be manually updated every single time I make a change to My Sticky Header’s text or button content, which is obviously not ideal.

    Could you please patch out this very small but seriously annoying glitch? Thanks a million! -Mike

    P.S. Both WordPress and My Sticky Bar are up to date.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Karina

    (@karinapremio)

    Hello, thanks for reaching out! Can you please try with this CSS code and let me know if it works?
    You can add the code in your WordPress dashboard > Appearance > Customize > CSS (or Additional CSS) or in the plug-in built-in CSS box.

    @media (max-width: 676px) {
    	.mysticky-welcomebar-apper #page-container #main-header{
    		top: 80px !important;
    	}
    }
    Thread Starter Mike Costanzo

    (@mikecostanzo)

    Hi there,

    I know that the 80px approach will work for now. But what happens when my I create a Sticky Bar with more words (and more height on mobile)? Won’t I have to update this code every time? isn’t there a better solution?

    HI, I’m getting the exact same issue today on my client site.

    I’m going to try that code to see if it will work also. I’ve spent hours trying to fix the issue on my mobile where the top section sits on top of my Header logo and mobile menu …

    I’ve even had Divi Theme trying to fix it for hours also. Very frustrating.

    Is there a little glitch with the plugin on mobile with Divi Theme & Divi Builder?

    Thanks

    I hope I’m allowed to ask questions here as exact same issue..

    That code fixed it on my mobile portrait.

    The landscape version of the mobile still has the header logo & menu underneath it.

    HOW can I fix this please?

    It seems when I use Inspector the issue starts on below 780×1048 devices … It’s fine on this device, then after that smaller it hides underneath your plugin …

    Do I have to change code to max-width: 1048 instead? But would that actually fix the mobile landscape?

    Thanks

    There must be an issue on the plugin side of things, to cause this issue on the mobile …

    I’ve edited the code slightly to fix the landscape to @media (max-width: 1048) … but it is NOT quite right on the landscape of phone device …

    I suppose we would prefer to have a better fix than for us to guess HOW to fix it via some CSS code as there are still many other devices this will affect the view … Example on Ipad, then that padding is NOT sufficient .. etc

    Plugin Support Karina

    (@karinapremio)

    Hello, thank you for your comments.

    Unfortunately, our developer confirmed we aren’t able to offer a fix on our end as the fix depends on 1) the customer’s site-specific theme/ header settings and 2) the customer’s site-specific welcome bar settings.

    @kristinubute In order to better assist you, can you please drop us a line at [email protected] with 1) a link to your site, 2) a confirmation of the exact current code you are trying with and 3) a confirmation of where exactly you’re still having issues on? We’ll be happy to get it to work.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Problem with My Sticky Bar (margin-top) on Mobile (Divi Theme)’ is closed to new replies.