Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #909751

    Hi

    I’ve tried a few snippets of code to increase the breakpoint for the mobile menu.

    I wish to increase the breakpoint to 1060px to accommodate a large menu in tablet landscape. When I apply code found on the forums the burger menu icon displays immediately under the centered logo, whereas I want it to align to the right in the same as tablet portrait.

    Can you asist?

    Kind ergards

    Duncan

    #910097

    Hi Duncan,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-width: 990px) and (max-width: 1060px) {
    #avia-menu {
      float:right;
    }
    }

    Best regards,
    Rikard

    #910194

    Thanks Rikard

    However, the burger menu not appearing on tablet portrait. Is there something else I should be adding?

    kind ergards

    Duncan

    #910343

    Hi,

    Can you try adding this css code in Quick CSS:

    @media only screen and (min-width:768px) and (max-width:1060px) {
      #avia-menu .menu-item {
        display: none;
      }
    
      #avia-menu .av-burger-menu-main {
        display: block;
      }
    
      #avia-menu {
        width:auto !important;
        float:right: !important;
      }
    
      .responsive #top #wrap_all .main_menu {
        top: 0;
        height: 80px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
      }
    
      #header_main_alternate {
        display: none;
      }
    }

    Hope this helps :)

    Best regards,
    Nikko

    #910384

    Thanks Nikko

    One last thing, is it possible for the header to shrink also?

    kind regards

    Duncan

    #910528

    Hi Duncan,

    I think it’s possible, try adding this php code in functions.php:

    function add_custom_script(){
    ?>
    <script>
    var $document = $(document),
        $element = $('#header'),
        className = 'hasScrolled';
    
    $document.scroll(function() {
      if ($document.scrollTop() >= 210) {
        $element.addClass(className);
      } else {
        $element.removeClass(className);
      }
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_script');

    then replace the last css code in Quick CSS I gave with this one:

    @media only screen and (min-width:768px) and (max-width:1060px) {
      #avia-menu .menu-item {
        display: none;
      }
    
      #avia-menu .av-burger-menu-main {
        display: block;
      }
    
      #avia-menu {
        width:auto !important;
        float:right: !important;
      }
    
      .responsive #top #wrap_all .main_menu {
        top: 0;
        height: 80px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
      }
    
      #header_main_alternate {
        display: none;
      }
    
      #top #header.hasScrolled .container.av-logo-container {
        height: 80px !important;
        line-height: 80px !important;
      }
    
      #top #header.hasScrolled .logo a, 
      #top #header.hasScrolled .logo img {
        max-height: 80px !important;
      }
    }

    Best regards,
    Nikko

    #911063

    Thanks Nikko :)

    #911082

    Hi,

    You’re welcome, just glad we could help :) Let us know if you need further assistance or if we can close this thread.

    Best regards,
    Nikko

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.