Help: product landing page nav-bar nav-links

Help: product landing page nav-bar nav-links
0.0 0

#1

My code is passing but when I click on the nav-bar link at the top of my page (the first “Features” link), the anchor does not go up high enough to show the section. It is cutting it off. The other nav-bar nav-links (“How it Works” and “Pricing”) show their sections properly. What snippet sections of code should I be looking at and adjust to get that top anchor to display properly? Well, not exactly. I just looked more carefully and those anchors are also not vertically starting exactly where I would like them to.

I’m still trying to clean it up, and all my work so far is local on VS Code. I could put the whole code up on a Github page.


#2

when I was working on my product landing page i had a similar issue. If you want you can look at how I handled it here:

search for the sections relating to #showBaladi which is one of the internal anchor links I use.


#3

Thanks. I tried everything I could think of from your example, but nothing made any difference in mine. BTW, nice job on yours.


#4

thanks kindly. Do you want to share your pen here and I can take a look?


#5

I can put it on Github pages. If you want, I’ll try to figure out how to put it on CodePen. That’s a little harder for me.


#6

ok either way… let me know by responding to this post with the reply button, otherwise I may not get a notification…


#7

Wow am I confused now. My page was passing all the tests when run from VS Code. I just put it in Github and the formatting is totally screwed up. There is no difference in the files. I tried adding other stuff I had not used, but still the same mess. Please take a look at it here and see if you can give me some pointers on where to go. It looks as if the bootstrap cdn is not working at all. https://silvanet.github.io/ProductLandingPage/

Now also three of the tests that previously were passing, are not!


#8

sorry for my ignorance but is there a way to get access to your code? (not sure how to find your css and html)


#9

Oh, sorry, I sent you the git pages link, not the repo link. I also found this old article about Github not working with bootstrap. I hope that’s no longer the case. Looks like a lot of work. https://www.techrepublic.com/article/build-full-featured-sites-with-jekyll-bootstrap-and-github/

Here’s my repo link for my page:

Thanks so much for your offer to help.


#10

i played with your page and your links seem to be going to the correct spots. Which link was the problematic one and can you clarify where it should be going?


#11

ps . the features link starts from the fire type icon , pls clarify where it should have gone…


#12

OK, first, here, I got it basically working on CodePen. It passes all the tests again, but the nav-bar has shifted to the left margin on top.

As far as where the nav-links should go, the #features one should at least show the flame icon and the “Premium Materials” title and the description.

When you click on the “How It Works” nav-link, it should show the top of the video or a little above it.

The “Pricing” link should display the entire pricing boxes with their titles. None of that happens in my Chrome browser.


#13

I see all of the links working as per your description on the github link you shared earlier…


#14

just to prove it, i took three screen shots showing the page after i click each link:


#15

So this could be a problem with my browser?
I just uploaded screenshots of what I see when I open the page, click on features, then on howitworks, and finally on pricing. They’re in my repo.


#16

You’re right. Must be my browser! Any idea on why it loses the bootstrap formatting? the icons are golden. The header logo is tiny. The nav-bar is horizontal on top. The products are in horizontal flexbox columns. I don’t get it.

Compare how it is partially working in CodePen. My hair is on fire.


#17

try looking up the browser support for the version of bootstrap that you are using. That is my only advice at this point. (I haven’t started to learn bootstrap yet)


#18

Thanks so much for even taking your time.


#19

no problem. Sorry I couldn’t help more.


#20

Sorry, maybe one more little look? I updated the cdn for bootstrap and now I have only one error. It says:
The navbar should always be at the top of the viewport.

Seeing as how it works in VS Code with LIve Server and it also passes on CodePen, any thoughts on why it may be throwing that error on Github?

Anybody?