Menu overlaps autoscroll

  • Resolved yimyo

    (@yimyo)


    9 years, 5 months ago

    Hey guys, im kind of new to wordpress and im currently building a website with scroll to id. However when I press the menu to scroll it goes to the correct id, but it hides under the menu. What are the options to fix this? It works fine in mobile view. I considered a cheat way of changing the css, but I dont want to ruin the mobile version as well.

    Link : http://find2men2.ddns.net:5050/ Thank you.

    Also, how do I fix the empty white space between the menu and the first row?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author malihu

    (@malihu)

    9 years, 5 months ago

    Hi,

    The option to use is “Offset” (more info).

    The issue is that your links are currently handled by another plugin: “jquery-smooth-scroll”. In order to use “Page scroll to id” with all its options (like offset), you need to deactivate “jquery-smooth-scroll”. Both plugins have more or less the same functionality, so you need to choose which one to use.

    If you choose to use “Page scroll to id”, you can set the value of the “Offset” option to be your sticky menu selector:

    .sticky-header .site-header
    or
    .sticky-header .site-header:fixed
    to bypass the offset on mobile view.

    The “empty space” can be fixed by adding the following CSS in your theme: 

    #main > article:first-child {
    padding-top: 0;
}
    • This reply was modified 9 years, 5 months ago by malihu.
    Thread Starter yimyo

    (@yimyo)

    9 years, 5 months ago

    thanks for the help!

    I got one more question regarding the menu highlighting. When I click on a menu item it scrolls there and highlights it, but however when I scroll away, the clicked is still highlighted. I tried using the force one highlight in the setting but it’s not working.

    edit: also sometimes multiple highlights when you go scroll precisely in the middle. I tried the .mPS2id-highlight-first and -last

    • This reply was modified 9 years, 5 months ago by yimyo.
    Plugin Author malihu

    (@malihu)

    9 years, 5 months ago

    The clicked link stays highlighted because you have the following CSS: 

    .menu-item a.mPS2id-clicked {
    color: #9B5F00;
}

    Remove the above if you don’t want that.

    For the multiple highlighted links issue, try disabling “Highlight by next target” and/or “Keep highlight until next”.

    You should also try to have equal height images/content inside your image slider (otherwise, the slider changes the total length of your page which affects scrolling and highlighting).

    • This reply was modified 9 years, 5 months ago by malihu.
    Thread Starter yimyo

    (@yimyo)

    9 years, 5 months ago

    I deleted:

    .menu-item a.mPS2id-clicked {
    color: #9B5F00;
    }

    but it highlights the default blue instead now

    Plugin Author malihu

    (@malihu)

    9 years, 5 months ago

    This is because of your theme’s stylesheet:
    ...wp-content/themes/shoreditch-wpcom/style.css, line 1176 

    .main-navigation a:focus,
.main-navigation a:hover {
    color: #3e69dc;
}

    You need to remove the .main-navigation a:focus selector.

    Thread Starter yimyo

    (@yimyo)

    9 years, 5 months ago

    Thanks! I solved it by making .main-navigation a:focus, to the same color as my original menu and making .menu-item a.mPS2id-highlight !important to overlap it.

    • This reply was modified 9 years, 5 months ago by yimyo.
    Plugin Author malihu

    (@malihu)

    9 years, 5 months ago

    Great 🙂
    Gonna mark this as resolved.

    Thanks a lot for your rating and review too!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Menu overlaps autoscroll’ is closed to new replies.