One column overlap another

Support
#1

Hi there,

On this page https://thelanguagesherpa.com/russianpod101-review/ I have a table of contents.

I would like to push the quick navigation column down so that it overlaps with the grey table of contents beneath it. However, whenever I adjust the margin the quick navigation text goes under the table of contents and cannot be seen…

Do you know how I can make these elements overlap, but have the quick navigation on top?

Thank you!
LS

#2

Hello There,

Thanks for writing in!

Do you want something like this?

Please add a custom ID like “quick-navigation” and “table-of-contents” for each text element. You can do this in the Customize tab in the text element settings. And then insert the following custom css in the Cornerstone settings tab, Settings > Custom CSS

@media(min-width: 979px){
  #quick-navigation {
    position: absolute;
    top: 15px;
  }

  #table-of-contents {
    padding-top: 120px;
  }
}

We would loved to know if this has work for you. Thank you.

#3

That’s brilliant - thank you Rue!

#4

You are most welcome!

#5

Actually, Rue, while I’m at it, I did have a couple of other questions related to this table of contents:

  1. When the items are made into links I see that their colour and interaction changes. Do you know how I can adjust the ToC items’ colour when they are 1) not hovered and when they 2) are hovered and 3) so they are underlined when hovered over. But I want this to only be the case for links in the ToC and not for the rest of the article.

  2. The ToC item ‘Main Features’ has some sub-bullet points that are numbered. Do you know how I can remove the numbers from these sub-bullet points?

Thank you!
LS

#6

Hi There,

Please add the following CSS also:

#table-of-contents ol {
    list-style: none;
}
#table-of-contents ol li a {
    color: hsl(199,100%,50%);
}
#table-of-contents ol li a:hover {
    color: hsl(199, 80%, 25%);
    text-decoration: underline;
}

Hope it helps :slight_smile:

#7

Hi Thai,

That’s great, thank you - just one thing: I only wanted the sub-bullet points that belong to ‘Main Features’ to be without numbers, not every item.

Thanks,
LS

#8

Hey LS,

Assign a class to your Main Features section and declare a list-style: none to your ordered list like this:

.my-class ol {
    list-style: none;
}

Looks like you’re doing that because the number always starts from 1?

Just FYI, you can set the starting number of an ordered list. See https://www.w3schools.com/tags/att_ol_start.asp. You can also follow this method.

Hope that helps.

#9

Hi Christian,

I was actually talking about the list in the Table of Contents area. Anyway, I did try adding a class to the main features text and doing what you suggested, but it didn’t work.

Is it not possible to just exclude the sub-bullet points from the CSS rule?

Thank you,
LS

#10

Hey There,

Do you want something like this?

If that is the case, you can use this custom css code:

#table-of-contents ol ol li {
    list-style: square;
}

Hope this helps.

#11

Hi Rue,

No, I want there to be numbered bullets for:

  • What is RussianPod101
  • Who should get this
  • Main Features
  • Subscriptions and Pricing
  • Current Discounts
  • Summary and Verdicts

and for there to be nothing at all in front of:

  • Audio/Video Lessons
  • Grammar Bank
  • Vocabulary Learning Tools
  • 1-On-1 Learning

Thanks,
LS

#12

Hey Again,

You mean like this?

  • Please remove this custom css
#table-of-contents ol {
    list-style: none;
}
  • Replace it using this instead:
#table-of-contents > ol {
    list-style: decimal;
}

#table-of-contents ol ol li {
    list-style: square;
}

You can replace the square to none if you do not want to display any bullets in the sub menu.

Hope this helps.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.