Text “Jumping” On Click

  • Resolved sgclark

    (@sgclark)


    4 years, 6 months ago

    Hi:

    Whenever I click on an element within the “Mobile Menu” on my site, the menu text does a slight jump up before the page changes to the intended destination. I’ve cleared out all the CSS I’ve used to customize the look of my implementation of Mobile Menu to verify it is not something I’m doing on my side. Any thoughts or suggestions on what may be causing this to happen? I don’t have any JS installed with my theme. Don’t know if there are any known conflicts with other plugins?

    Any help would be appreciated!

    Stephen

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Rui Guerreiro

    (@takanakui)

    Hi @sgclark,

    Hope you are fine.
    At the moment the menu doesn’t seem to work. It seems you have an error in the javascript console related to sgoptimizer.

    try to sort and let me know so I can look at the reported issue.

    Thread Starter sgclark

    (@sgclark)

    I had not seen it malfunctioning but I went ahead and disabled “SG Optimizer” (which is from my site host) and that did seem to do the trick! I did not catch that previously so thanks for pointing that out!

    Stephen

    Thread Starter sgclark

    (@sgclark)

    Actually I spoke too soon. I disabled that plug in and the nav/menu seems to be working now. but the text jumping still appears to be happening. It happens on click. The text below the item I’m clicking jumps up a few pixels. It could be a CSS conflict…I’m not sure. I’ve looked and can’t figure it out so was jus wondering if you may know where i should look?

    Plugin Author Rui Guerreiro

    (@takanakui)

    It seems to be the border of 5px that doesn’t exist when the element is active.
    Can’t remember why I’m removing the border in an active state.

    Add the code below to the custom CSS option.

    .mobmenu-content li a:active, .mobmenu-content li:active, .mobmenu-content li a .mob-expand-submenu:active {
    border-bottom: 5px solid #fff;
}

    Clear the cache and test again, let me know the result.

    Thread Starter sgclark

    (@sgclark)

    Hi:

    Thanks for sending this along. I was able to use this as you instructed and it did work with a couple of adjustments. The initial CSS code you shared only worked for the top level nav and not the sub nav. I repurposed what you shared for the sub nav and that seemed to work fine. Also, I was seeing a smaller ‘jump’ with the 5px you originally included. I adjusted that to 4px and it removed all movement! So I think we’re at a solution!

    
/*JUMPING TEXT FIX - FROM APP DEVELOPER*/
.mobmenu-content li a:active, 
.mobmenu-content li:active,
.mobmenu-content li a .mob-expand-submenu:active {
    border-bottom: 4px solid #fff !important;
}
.mobmenu-content .sub-menu li a:active, 
.mobmenu-content .sub-menu li:active {
    border-bottom: 4px solid #fff !important;
}
/*JUMPING TEXT FIX - FROM APP DEVELOPER*/
    • This reply was modified 4 years, 6 months ago by sgclark.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Text “Jumping” On Click’ is closed to new replies.