Mobile breakpoint for menu centered under logo - Support | Kriesi.at

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

Author

Posts

February 8, 2018 at 1:27 pm #909751

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

February 9, 2018 at 4:48 am #910097

Rikard

Keymaster

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

February 9, 2018 at 11:12 am #910194

dweddell

Participant

Thanks Rikard

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

kind ergards

Duncan

February 9, 2018 at 6:13 pm #910343

Nikko

Inactive Moderator

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

February 9, 2018 at 8:08 pm #910384

dweddell

Participant

Thanks Nikko

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

kind regards

Duncan

February 10, 2018 at 3:30 pm #910528

Nikko

Inactive Moderator

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

February 12, 2018 at 12:23 pm #911063

dweddell

Participant

Thanks Nikko :)

February 12, 2018 at 1:08 pm #911082

Nikko

Inactive Moderator

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