Menu Movement

  • I’ve had some people testing out my website and some have mentioned they find the menu a bit “too” responsive in that it’s very “bouncy” and pops up almost too easily when scrolling on mobile in particular (and blocks too much of the screen). I know this is a feature and I do like it but I’m wondering if there’s some way to slow this down or alter it so it’s not quite as jumpy? Perhaps there’s even a way to just make the menu “fixed”?

    Thank you!

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Viva Themes

    (@vivathemes)

    Hi @natejamestz

    You can disable the menu effect in mobile devices by using this css code. Add it under ‘Appearance – Customize – Additional CSS’

    @media screen and (max-width: 465px) {
      .headroom-unpinned { transform: translateY(0) !important; }
}

    Let me know if any problem.

    Thanks,
    Edy

    Thread Starter natejamestz

    (@natejamestz)

    Hi Edy,

    Thank you – however, I’ve added this css code but the menu effect continues to happen on mobile devices.

    Nathan

    Theme Author Viva Themes

    (@vivathemes)

    Hi Nathan,

    Just checked your website and the css code I gave you is not loaded and there’s an error

    Failed to load resource: the server responded with a status of 409 () styles.css 1

    So the css is not loaded for some reason. Try adding the code directly in ‘style.css’ file. However I do not see an issue with your website. Works as it is supposed to and seems fine to me.

    Thanks,
    Edy

    Thread Starter natejamestz

    (@natejamestz)

    Perhaps it’s related to another css code that I have added? I added one so the menu bar would be in line with my logo? But it also uses @ media so perhaps the two are interfering with one another?
    There isn’t an “issue” with the website just that the mobile version of the site I was hoping to be able to disable the menu effect as some have said they’ve found it interferes with site navigation.
    Here’s all the additional CSS I’ve added under “Additional CSS”:

    @media screen and (max-width: 465px) {
      .headroom-unpinned { transform: translateY(0) !important; }
}
@media all and (min-width: 900px) {
  #title-info {
    margin-top: -32px !important;
  }
  #menu-main {
    margin-top: 32px !important;
  }
}
#logo img {
  max-height: 250px;
	max-width: 150px;
}
#rightbar .widgets {border:none !important;}
.mainnav li a.sf-with-ul {background: #ccc;}
    • This reply was modified 5 years, 10 months ago by natejamestz.
    • This reply was modified 5 years, 10 months ago by natejamestz.
    • This reply was modified 5 years, 10 months ago by natejamestz.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Menu Movement’ is closed to new replies.