Technical documentation page query

Hi there,

I am having issues with reducing the web page on codepen as the main-section goes into the nav bar. On dev tools it does not do this on any of the tablets/phones.

Does anyone know how I can stop this and make the page a bit more responsive?

I am also stuck on the last one…

1. On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.

Please see link below, thanks.

I don’t see anywhere in your CSS where you are trying to shift the nav above the main content for narrow view ports.

or
position: relative / display: flex;

I’m not sure what your post means?

Currently your CSS is set to display the nav on the left hand side and your main content on the right. For narrow view ports you’ll want to change that so the nav is above the main content. You would use a CSS media query break point to do this. I see you have one in your CSS but you aren’t doing anything in it to change the layout of the nav/main content. Also, you can’t use viewport units in the break point. Think about why it doesn’t make sense.

Thanks I think I’ve fixed it now. It seems to be passing too. The responsiveness was acting different on codepen compared to explorer also which was making things tricky to figure out. I also have a wide screen monitor so codepen didnt pass my issue above until I went full screen with the window. Yes I’m just starting to understand viewports a bit more today. Would have been pointless there.

It’s definitely much better as the nav is shifting above the content now, but you still have a horizontal scroll bar at narrow widths and the links are breaking out of the nav menu.

1 Like

Thanks for pointing that out. I thinks it’s a bit better now.

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