Services Tab does not scroll down to page section

Design help General
1

Hi guys! I hope you are all having a great day today. I’m seeking assistance to fix an issue when you click services, it does not scroll down to the actual page section.

Please note I have two services tabs on my Nav, but that is because I am currently working on a drop-down menu so the user can see all the services.

Please let me know If I’m missing something, or if I’m doing something incorrectly.

Thank you

Here is my site Read-Only: LINK

2

Hi Xternal,

Native Nav components cannot be set to fixed and take on “Link to Section” property. I’m assuming there’s hard code inside the component that conflicts with that css property. If you set the NavBar to Absolute it works, just not fixed.

I would suggest using a Div and adding Text Links stacked, then put Logo up top. Basically, recreate the sidebar menu from scratch - without using a native component.

It will work then. See ya. :grin:

1 Like
3

@garymichael1313 I never knew that! So would you just stick a button in and style it the same as the navlinks?

@XternalDesigns just curious, but how come all your nav-links have different class names?

1 Like
4

To recreate a side bar, I would use:

  1. 1 Section to contain: Set to fixed and whatever you need
  2. 1 Div to wrap: And don’t really need flex or anything, Block works fine
  3. Use text links for individual links: Set to block stacked vertically

Because using text links instead of link blocks or buttons is easier for functionality.

  • Text links can use line height if you want to enlarge vertically

  • Text links will allow for hover states on gliphs, icons, text all in the same block. You can’t do this with link blocks or buttons. For example if you want a car icon and a title, how would you change colors on both; if using a button or link block? Link blocks won’t allow for multiple objects inside to change colors at the same time on hover, you’d have to set the color state on each individual element inside. :wink:

Text links are THE BEST component to use for links and buttons; especially if you want icons and text together. Or if you need multiple items to change states. And they can take on icon sets and toolkits, while using typography settings. Which can be a painpoint regarding responsiveness. Link blocks and buttons don’t react the same.

  • Text links work well for transparency, horizontal width, vertical width; without using W & H properties. The font size and line height work great for VW when added to the font size section, which gives a granular decimal approach that you simply can’t get when combining vectors and text inside a link block. (Like font size - 1.25 VW) It only touches the actual text or glyph icon inside the text link. For a Link Block or Button, that type of attribute affects the entire box and can’t easily separate items inside without doing each and every element.

Hope that helps. Have Fun!

5

Thank you Gary! That makes much more sense!!! I’ll give it a try thank you!

6

Hi @magicmark ,

I honestly don’t know! When I added in the link blocks, they automatically had different names. I thought that was standard… :confused:

7

If you give them all the same class and style just one, everything else changes as they’re one and the same.

No right or wrong way of course but makes it easier later on if you need to change things. :grinning:

1 Like
8

That’s good to know!! Thank you so much @magicmark :smiley: :smiley:

9

Yeah just add 1 Link Block in the sidebar. Style it how you want with all hover states, etc. Then just copy it a bunch of times. Then click and change the text. You don’t need to give those different classnames.

1 Like
10

That’s awesome thank you @garymichael1313 :smiley: