Mobile Menu Bar flickering

It seems like after the update, the mobile menu bar flashes/flickers on and off. How do I prevent this from happening?

Hi,

I am sorry to hear that you’ve run into an issue. I am happy to help with it.

I need to check your mobile menu needing help with. Can you share a link to your website here?

Regards,
Kharis
aThemes Support

Sorry for the delay. I thought I emailed the link earler.

Hello,

First thanks for using our theme Sydney Pro!

Unfortunately I couldn’t reproduce the issue here. I tested with Google Chrome Developer Tools and iPhone 12. Both seems to be working normally without “flashes/flickers”.

Could you please send us more details ? Like in wich devices you are testing and the issue occurs.

Kind Regards,

Rodrigo.

aThemes Support

I’ve used an iPhone 6s, 8 and X, and each time you scroll the page on a mobile device, the menu bar flickers or disappears.

Hello,

Thanks for the information!

Go to Appearance > Customize > Additional CSS and please try changing the below custom CSS
:
image

To this new:

@media only screen and (max-width: 1024px) {
    .site-header {
        position: sticky !important;
    }
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

I tried your code but the menu bar disappeared completely when scrolling, which is not what I was going for. The menu needs to be visible at all times.

As you see, the menu is initially visible, but when scrolling, it flickers or disappears entirely.

Hello,

Please try with this new code at Appearance > Customize > Additional CSS:

@media only screen and (max-width: 1024px) {
    #responsive-menu-container {
        z-index: 99999;
    }

    .site-header,
    .site-header.fixed,
    .site-header.float-header {
        position: fixed !important;
    }

    #content {
        margin-top: 81px;
    }
}

Please make sure to include this as the last line of code in the additional CSS box (scroll until the final of the box and then paste this code).

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Unfortunately, that didn’t work either. The bar still flickers and disappears. While we are working on that, How do I add a header to my blog page? Not the individual posts, but the page that houses the blogs.

Actually, I figured it out. I mistakenly wrote some conflicting CSS that caused the issue. Thank-you for all of your assistance and patience.

Your assistance on the blog header would be very helpful though.

Hello,

Great that you figured this out!

Regarding the blog header, currently that’s not possible trough the theme options. But you can do that by editing the theme files through the Child Theme of Sydney Pro. Please follow the steps below:

  1. Download the Sydney Pro Child Theme here:
    https://drive.google.com/file/d/1puSNYIT3agkjZmZyKtpQMPJqqMW2c7PL/view?usp=sharing
  2. Install and enable the child theme through Appearance > Themes
  3. Copy the header.php file from the parent theme and paste inside the child theme folder.
  4. Edit the new header.php inside the child theme folder and add your custom code like the image below:

Here’s the code I used in the image:

<?php if( is_home() ) : ?>

        <!-- CUSTOM HTML CODE TO THE BLOG HEADER -->

        <div class="container-fluid px-0">

            <div class="row">

                <div class="col">

                    <img src="https://www.rd.com/wp-content/uploads/2020/04/GettyImages-694542042-e1586274805503.jpg" class="img-fluid" alt="" />

                </div>

            </div>

        </div>

        <!-- END OF CUSTOM HTML CODE TO THE BLOG HEADER -->

    <?php endif; ?>

This way you will show your custom HTML code in the sydney blog page archive header area. In the above example I’ve added a full width image of a bunny (just for example).

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support