How to get this work on Bbuilder and Astra Theme

  • Resolved soydanielromero

    (@soydanielromero)


    6 years ago

    Hello Malihu,

    I’m trying to get the plugin works with Beaver Builder and Astra Theme but I can’t, please help me to do so. I have the following configuration:

    On plugins selectors: a[href*=#]:not([href=#])

    On Custom Menu Items I have added
    a custom CSS class = ps2id and
    Link Relationship (XFN) = m_PageScroll2id

    I have enabled the following features too:
    Allow only one highlighted element at a time checked
    Keep the current element highlighted until the next one comes into view (i.e. always keep at least one element highlighted) checked
    Prevent other scripts from handling plugin’s links (if possible) checked

    In the custom CSS I have added:
    .main-header-menu, .menu-item .ps2id > a.mPS2id-highlight{
    background-color:red;
    }

    The problem is the entire main header menu section gets highlighted. Looking for the code I can’t see the plugin is adding the mPS2id-highlight class

    Please help me to get this work, this is driving me crazy

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

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

    (@malihu)

    Hi,

    The highlight you see comes from your theme (not the plugin). It’s a common practice for theme to highlight same-page links. To fix your issues, you need to do the following:

    1.Change all your links URL to use https.

    Your site is on https but your links URL start with http which doesn’t work, simply because https://soydanielromero.com and https://soydanielromero.com are 2 completely different URL.

    2.Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option (click save changes).

    3.Fix the theme highlight issue by adding the following to your CSS (e.g. in theme customization > additional css): 

    .main-header-menu .current-menu-item > a[data-ps2id-api], 
.main-header-menu .current_page_item > a[data-ps2id-api], 
#ast-fixed-header .main-header-menu li.current-menu-item > a, 
#ast-fixed-header .main-header-menu li.current_page_item > a {
    color: #1d1d23;
}

    Let me know

    Thread Starter soydanielromero

    (@soydanielromero)

    This works just perfect Malihu, really thank you I would never have figured out that I have to make such an accurate CSS selection in order to make it work, the URL error I think was due to my anxiety to get this done, I’m pretty aware of the differences between http and https.

    I have one last question, the main menu has a top bar, so when the page first load the first menu item doesn’t get highlighted would you please give me an advice to get the first menu item highlighted on page first load?

    Plugin Author malihu

    (@malihu)

    Glad I helped ??

    You mean the first item “Inicio”? It is highlighted when I load the page but I’m not sure I understand which one(?)

    Thread Starter soydanielromero

    (@soydanielromero)

    I think it was something with browser cache it is working perfect now. Once again, really thank you

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to get this work on Bbuilder and Astra Theme’ is closed to new replies.