Link a button to a hidden div

Design help Animations & Interactions
1

Hello there,
I made tabs (using Nav bar) and now I am trying to connect it to the content.
Goal: to be able to navigate and to emphasize current tab.

Problem:

I can not emphasize as current the 2nd and 3rd tab - because of the content relevant to those tabs is hidden.

2

Hi!

Do you mind sharing your site’s read-only link please?

1 - On your site’s dashboard, click the Share icon:

http://vincent.polenordstudio.fr/snap/nqmwm.jpg

2 - Generate and Copy the link:

http://vincent.polenordstudio.fr/snap/gpto0.jpg

3 - Then edit your post here, and paste the link inside.

3

I done it now. Thanks!

4

Ok there’s 2 things:

  1. you’re missing an important Navbar setting for when the Navbar is on the side and takes up the full height of the page. It’s an easily overlooked feature. When active, a link to a section will scroll the content area for the begining on the section to reach the top of the page. It also makes the current state of the links—needed to emphasize them_ work quite well.

http://vincent.polenordstudio.fr/snap/g8665.jpg

  1. your structure is too complex for this to work well.
    Even if you set your navbar like explained above, it’s not going to work well. Your page structure is too complex with your columns inside of a ROW element. You should aime for a simpler structure, where the navbar is the sibling of the container of your sections. You should test:

    – body
    – – page content (where you apply your big padding)
    – – Navbar
    – – sections
    – – – section 1
    – – – section 2
    – – – section 3

This way it should work, you should get your “Current” states when you expect them.

Now, the other issue is when you link to a section that’s hidden… The thing is with that kind of structure, and a side menu that works well, you don’t really need to hide sections’ content. You can let the page be long and scroll when the user uses the side menu.

5

Thank you very much !! It works perfect now ))

1 Like