Unable to make navbar responsive

Hi there, I’ve been at this for about a month and a half so I’m quite new and barely know what I’m doing. I’m on the product landing page project for FCC, and I’ve been at this for hours and cannot figure out a few things.

  1. When I resize the screen, the UL element start moving into the email column, and email onto the logo.
  2. The email stops being vertically aligned with the submit button by a smidge. Fixed
  3. I can’t for some reason make the flex-direction: column to work on the smaller screen settings.

Ideally, I would like it so that the logo sits on top, followed by email / submit, followed by the UL when the screen becomes smaller.

I’ve been googling, and trying different things but can’t seem to make it work. Any help would be greatly appreciated. Please ignore the other stuff, I haven’t begun on that yet. Here is a link to my pen:

Hi @Adrian540

You are confusing yourself and making it complicated. You can remove all the props you already have for the steps below mentioned, do not complicate yourself.

  1. Give some max-width to your div which wraps the image (logo) and apply 100% width to the image inside the div. ( When you give a max-width and width of 100%, the content occupies the entire content up to the size of max-width Ex: max-width: 100px and width: 100% makes the element to occupy the full 100px width )

  2. Give your #nav-bar some width ex: 200px and apply display flex to your form tag ( You can remove all other properties which you already have and i need not explain this, you can understand when you do this.

  3. Remove all the properties you have for ul and apply display: flex and make the default left-padding to 0. Now apply some margin to the left and right for the li elements. Applying flex and making justify-content as space-between doesn’t behave as you wanted, because the width of ul doesn’t have enough space. You can see that by using dev tool ( Right click and select inspect element )

Good Luck… :slight_smile:

1 Like

Haha, I am a classic overthinker… Thank you @Sujith3021 for being patient with me, very much appreciated. It seems to be working much better now. I am still having a problem with the ul not turning into a column when screen is less than 600px but I will try to figure it out on my own. :+1:

1 Like