Hi everyone,
I finished my Build Technical Documentation Page project, and then I figure out that story#14 says that the navbar should be shown on the left side of the screen and should always be visible to the user. I tried few ways to fix the navbar but couldn’t do it. Could someone please suggest an easy, safe, and fast way to fix the sidebar? Below you can find the link to my codepen. Thank you.
Hi, you should get rid of your <html> element, as in codepen its already predefined for you(but not visible). Anything you want to add in the document head, you can do by clicking the HTML settings button. You also dont need a bodytag, anything you write in the HTML window of codepen is part of the body, this is the body. Its also correct to have your footer inside the body, not outside as you attempted to do. You can split the body into header, main and footer, if you wish, its not a rule, but its a good pattern(as long as you need header and footer for your page).
There is no “easy” way to make your nav bar stick to the top, or anywhere(other than its default postion). I mean, its not hard to achieve, but then very often you must put additional styling for other elements to make things in order. As a start you can use position: fixed on your nav-bar, to make it stand still while scrolling and then you can use additional properties like top and left and give them values which will set where the element should be positioned from the top/left corners of the window respectively. I suggest you read more on those properties on other web sources to get familiar with
Hi, Thank you. It was helpful. I managed to do it somehow. But now I have another problem. In the @media property, I can’t override, rewrite the margins of the .main-section class. When I tried in the browser tools, overriding margin-left from 215px to auto or 0px makes my .main-section class move to the left, which allows me to have some kind of responsiveness as a screen shrinks. And also I want my nav-bar to goes down only to the end of the main section and not further down. Could you please help me with those two issue? Thank you.
That is because your media query rule comes before your main-section class styles. This is how CSS apply styles in this case, it goes from top to bottom, applying styles and apply your main-section style after the media query was applied(overrides it). (put your media rules in the end of your code, to avoid such conflicts).
Oh I see, that’s right, a beginners mistake, thank you.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.