Okay
  Public Ticket #3524077
Vertical sticky scrolling tab
Closed

Comments

  •  5
    Filip started the conversation
    November 17, 2023 at 12:45pm

    Hi,

    for a website that I'm building I want to customise the Vertical sticky scrolling tab. I know this is not standard support but how more I can do with Salient how more I'll sell it :-)

    I'm almost there with some CSS tweaks but have one thing left

    I want the bullet before the active tab gone and would like to have a white triangle on the right instead  see the sample I added as image

    Can you help me or point me in the right direction?

    Thanks
    Filip

    Attached files:  sample.jpg

  •  3,001
    Andrew replied
    November 17, 2023 at 4:01pm

    Hello again,

    Thank you for getting back to us.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (min-width: 1000px) {
  .nectar-sticky-tabs .active-tab .tab-nav-heading:before {
      transform: scale(0) translateY(-50%);
  }
  .nectar-sticky-tabs {
      flex-direction: row-reverse;
  }
  .nectar-sticky-tabs .scrolling-tab-content {
    margin: 0 4% 0 0;
    position: sticky;
    top: var(--nectar-sticky-top-distance);
  }
}

    Try that and let us know if it works for you.

    Thanks,

  •  5
    Filip replied
    November 17, 2023 at 5:04pm

    Hi Andrew,

    the bullet is gone but the tabs are now on the right side (see attached JPG), just as I would have set the option in the element itself to have it on the right side.

    But it has to stay on the left side, the bullet on the left has to be gone (placed there with a ::before) but I would like to have a indication on the right of the word white triangle like you see on my first JPG i've send, so the sample Iv' send I made in Photoshop to show what I want to have

    Attached files:  Schermafbeelding 2023-11-17 175926.png

  •  5
    Filip replied
    November 17, 2023 at 5:07pm

    Andrew,

    with the first part I was able to hide the bullet. Great!

    I only have to find a way now to have a white triangle of another indication after the tab name so in between the tab name and the tab content.


    Thanks

    Filip

  •  5
    Filip replied
    November 17, 2023 at 5:42pm

    Hi,

    I've found it thanks to the hint, this one did the trick, if you see something I could have done better please advise


    @media only screen and (min-width: 1000px) {
      .nectar-sticky-tabs .active-tab .tab-nav-heading:before {
          transform: scale(0) translateY(-50%);
      }
      .nectar-sticky-tabs .active-tab .tab-nav-heading:after {
        content:"\A";
        border-style: solid;
        border-width: 25px 30px 25px 0;
        border-color: transparent #ffffff transparent transparent;
        position: absolute;
        top: 0%;
        right: -100px;
      }
    }


    Thanks!


  •  1,920
    Judith replied
    November 17, 2023 at 6:09pm

    Hello Filip,

    Thanks for writing back.

    This workaround is great as well. Please let us know in case you experience other issues we'll be happy to help.

    Best Regards.