• Resolved sdwarwick

    (@sdwarwick)


    innovationscommercialization.com

    chrome/IE/android tested

    1) set width to < 900px
    2) click on hamburger (condensed menu): can open/close dropdown menus as expected
    2) scroll up causing title to move to left and reduce in size.
    3) click on hamburger: causes a scroll-down action
    4) click on hamburger again: no response, no menu dropdown.
    5) scroll up no longer causes title to move left and reduce in size

    not a child theme

    some custom css:

    .site-title {
    color: black;
    }

    h2.site-description {
    color: black !important;
    }

    a:focus, a:hover {
    color: #20589D;
    }

    .nav li {
    background-color: rgb(244, 244, 248);
    border-radius: 5px;
    margin: 2px;
    }

    div>ul.nav>.menu-item:first-child>a {
    padding-left: 20px !important}

    div>ul.nav>.menu-item:last-child>a {
    padding-right: 20px !important
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi @sdwarwick
    looking at your page you have chose to not display the menu on scrolling.
    Appearance -> Customize -> Header -> Design and layout -> STICKY HEADER SETTINGS
    Sticky header : display the menu

    so the real “bug” is that with that option unchecked in responsive mode that button shouldn’t be displayed at all ??

    Hope this helps.

    Thread Starter sdwarwick

    (@sdwarwick)

    Thanks for your response. I am still confused as to how this function should work.

    It would seem that under all circumstances when you have scrolled back up and a menu is available, it should function. As it is now, after any scrolling activity the menu never gets reactivated

    The only way to get the menu working again is to reload the page, which is not intuitive to users.

    Not sure how to even debug this, it would be buried deep in the code

    Ok, so I’ve been not clear ??

    Go here: Appearance -> Customize -> Header -> Design and layout -> STICKY HEADER SETTINGS
    you can see you have this option Sticky header : display the menu
    unchecked,
    so you don’t display the menu when sticky header enabled, this means that the button shouldn’t be displayed at all.
    That’s the point.
    That option makes the menu match a css rule which hides it, and this basically breaks the dropdown.
    So that is the bug, when you have that option unchecked the menu button shouldn’t be displayed at all, so your issue is a lateral effect of another issue ??
    To hide the menu-button on scroll in mobiles, add this css rule:

    @media (max-width: 979px){
    .sticky-enabled .tc-menu-off .btn-navbar {
      display: none;
    }
    }

    Otherwise, you want to keep the menu button in mobiles and show the menu even if you have that option checked? Then use this, instead:

    @media (max-width: 979px){
    .sticky-enabled .nav-collapse.collapse.in{display: block}
    }

    Hope this helps.

    Thread Starter sdwarwick

    (@sdwarwick)

    Thank you so much for this response. I would not have been able to find this solution without many hours of digging, if at all. If no one has said this recently, your help is so very much appreciated!

    I have chosen the second solution, as having the collapsed but active nav is very useful and does not interfere with how the top bar looks.

    Is this a bug that ends up as a fix in the next version? if so, how do you handle these two optional behaviors?

    Thanks for your words sdwarwick! ??
    Well good questions ??
    I proposed a github pull-request to nikeo (the theme creator) regarding the first solution, ‘because is more consistent, but yes the second solution makes sense too. I mean one, when sticky header enabled and scrolling, could want the menu button in mobiles even if he doesn’t want the menu in non-mobiles. I don’t know if it will end up in a new option, as you can see there are already a lot of options in Customizr (users might be confused). Probably one of the two will be chosen as the default one and the other will be covered by a snippet on https://themesandco.com/code-snippets .
    But these are just my thoughts ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘responsive nav menu behavior broken?’ is closed to new replies.