Sidebar is not fixed - Personal Portfolio

Hi guys! I’m currently working on my Personal Portfolio challenge. I’m trying to customizing it and I encountered a problem with the navigation panel that I placed to the left. I want it to be fixed while scrolling the content, but I can’t seem to make it work. I posted my Codepen link below. Any help or suggestion would be greatly appreciated. Thanks!

Codepen Link

Hi. Can you describe the issue that you’re having?

I applied position: fixed to your .profile-username class and it works. I did change the following CSS as well.

.profile-usermenu ul li a {
  color: #222;
  font-size: 14px;
  font-weight: 400;
  background: orange;
  width: 350px;
}

You may need to mess with the width in order to make it how you want it. But does that answer your question?

1 Like

Thanks for replying! I did apply it in my .profile-sidebar and it did get the position fixed. I also applied a width.

.profile-sidebar {
  padding: 20px 0 10px 0;
  background: orange;
  position: fixed;
  width: 25%;

However the problem is it kinda messed up the responsiveness. Is there anyway around this? Thanks again.

Can you explain what you mean by ‘messed up the responsiveness’? What is it doing? What should it be doing?

1 Like

Whenever I resize the window and widen it, the space between the sidebar and the content slowly narrows until they both overlap each other. If I widen it a bit more, it snaps back to its original state. For example:

This is what it looks like in Codepen when you widen the window. At this point, the space between the sidebar and the content is very narrow:

When you remove the position: fixed from the .profile-sidebar class, the distance between the sidebar and the content remains the same when you resize the window. (but it goes back to the original problem)

I hope I was able to explain it further.

Here is the link to the project. You can try moving the grey bar between the code and the display and see what I mean. Thanks again for your help!

I think I understand what you are saying.

I believe at this point, you want to incorporate media queries into your CSS. I don’t know where you’re at in your learning, so forgive me if you are already familiar with media queries, but media queries will allow you to style your site at specific widths. Right now, your CSS is telling the page how it should look at any given screen size, but with media queries you can specifically target screen widths and design from there. Most people I have followed recommend starting your design on the smallest screen width (so cellular phones basically) and expanding out. So your original CSS would style the page for how you want it to look on small devices (maybe 400px or smaller, but it really can be any width that you choose) and then the media queries would define how it looks on bigger devices such as larger cell phones, tablets and ultimately desktops.

If you do some research on CSS Media Queries I think that you will find what you are looking for. I hope that helps but let me know if you have any other questions or if I completely misunderstood what you were asking :slight_smile:

Hi! I haven’t learned about media queries yet. I just want my sidebar’s position to be fixed be properly responsive. Anyway, thanks for the help!

I added the following code to your .profile-sidebar class.

position: fixed;
top: 20px;
left: 30px;

That will keep the sidebar from running into your content. This CSS is basically saying your profile-sidebar should always be 20px from the top and 30px from the left. You’ll have to mess around with the actual pixels to get it exactly how you want it, but that will solve the issue of the content colliding.

1 Like

I’m a newbie myself so I can’t really give any advice, but I thought this might help:

1 Like

Thanks for the help!

I think using jQuery might help you solve this problem. When the webpage is scrolled, you can add css property to the element as follows -

$(window).scroll(function(){
     $('#element').css("position", "fixed");
});