Overlapping Rows

Support
#1

Hi there,

On this page https://thelanguagesherpa.com/russian-guide/ I have a table of contents in one row with a text element saying ‘quick navigation’ in another row on top of it.

Do you know how I can get it so that the quick navigation row moves down so that it is overlapping the ToC row (so that quick navigation is on top)?

Thank you!
LS

#2

Hello There,

I guess you have asked this one before. You also have accomplish this before. Please make sure that you have the same structure as the previous one and use the same solution. The “Quick Navigation” text element should be in the same row and column with the TOC so that it would be identical.

Please check out this thread: https://theme.co/apex/forum/t/one-column-overlap-another/32382/

#3

Hi Rue,

Yeah, I know I asked something very similar a while ago.

The thing is though I couldn’t replicate the solution using what you suggested before as I need to put the text element into a separate row and column this time…

LS

#4

Hi @riugn557,

I have checked the previous thread however I am now a bit confuse of what you want to achieve. Please create us a sample or guide of what you want to achieve.

Once we understand it, we’ll do our best to help you.

Thank you so much.

#5

Hi Nico,

On this page (https://thelanguagesherpa.com/russian-guide/), I basically want the row containing the words ‘Quick Navigation’ to overlap on top of the table of contents.

The result should look just like what I have achieved on this page: https://thelanguagesherpa.com/russianpod101-review/

The only reason I am not able to implement the solution that was provided in the previous thread is because for the new table of contents, the text has to be in a separate row and column.

LS

#6

Hello @riugn557,

Thanks for updating the thread.

You need to do couple of things to make the necessary changes. Please follow the below steps.

  • Open Russian Guide page in Content Builder and open the Row that’s holding quick navigation item.
  • Change the z-index value from 1 to say 999.

  • After that open the text element and under Customize > Class add a class name ex quick-nav-position.
  • After that add following CSS under Pro > Theme Options > CSS:
.quick-nav-position {
    position: absolute;
    top: -30px;
}

Here is a screencast video that I have recorded, you can take a look. https://cloudup.com/cYFnBnCr0-i

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#7

Thank you, Prasant!

#8

You’re welcome. Glad we could help.

#9

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