Mobile menu breaking in landscape mode

  • Resolved Valentin Petlov

    (@istoka)


    6 years, 2 months ago

    Hello!

    I’ve noticed that the mobile menu is breaking in landscape mode on some devices. I’m working with this starter theme – https://websitedemos.net/outdoor-adventure-02/
    I’ve tried it with Redmi Note 5 and I’m emulating iPhone X and Pixel 2 XL with Chrome’s dev tools and it is breaking when the device is in landscape mode. Can you please suggest a fix and possibly fix the demo theme too?

    You’ve done more than amazing work with the Astra theme! Thank you for providing such a great product for free! Thanks!

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Team Brainstorm Force

    (@brainstormteam)

    6 years, 2 months ago

    Hi @istoka ,

    Thanks for letting us know this small improvement. We would surely look towards it and would add a patch for it very soon.

    But in the meantime, you can use this CSS that would surely help you in mobile landscape mode:-

    @media only screen and (max-width: 820px) and (min-width: 600px) {
.main-header-bar-navigation.toggle-on{
    background-color:white; 
}
.ast-theme-transparent-header .main-header-menu a{
    color:black;   
}
.ast-theme-transparent-header .main-header-menu .current_page_item a {
    color:#fb2056;   
}
}

    I am sure this will help.

    Regards,
    Deepak

    Thread Starter Valentin Petlov

    (@istoka)

    6 years, 2 months ago

    Hi! It worked, but it needs some more tweaks:

    1. There’s an additional top padding that needs to be removed:

     .main-header-bar .main-header-bar-navigation.toggle-on {
	padding-top:0;
	}

    2. When you click on a link in the menu, the link text turns white. Any hints how to fix this? 🙂

    Thanks!

    Team Brainstorm Force

    (@brainstormteam)

    6 years, 2 months ago

    Hi @istoka ,

    We have created a JS code that will fix your issue without any further css. You can simply remove the previous css and simply add this JS in the child theme’s function.pho file:-

    function disable_transparent_header_mobile() {
    ?>
    <script type="text/javascript" >
    jQuery(window).on('resize', function(){
        if ( '812' >= jQuery( window ).width() ) {
            if ( jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
                jQuery( 'body' ).removeClass( 'ast-theme-transparent-header' );
            }
        } else {
            if ( !jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
                jQuery( 'body' ).addClass( 'ast-theme-transparent-header' );
            }
        }
    });
    jQuery( document ).ready(function() {
        if ( '812' >= jQuery( window ).width() ) {
            if ( jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
                jQuery( 'body' ).removeClass( 'ast-theme-transparent-header' );
            }
        } else {
            if ( !jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {
                jQuery( 'body' ).addClass( 'ast-theme-transparent-header' );
            }
        }
    });
    </script>
    <?php
}

add_action( 'wp_footer', 'disable_transparent_header_mobile' );

    Let me know once you add the above JS code in your child theme’s function.php file.

    Regards,
    Deepak

    Thread Starter Valentin Petlov

    (@istoka)

    6 years, 1 month ago

    Working perfectly fine, thanks! Sorry for the delay!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile menu breaking in landscape mode’ is closed to new replies.