Adoptly: I need help with the header bar

When I reduce the width of the screen, the header links (expectedly) turn into a vertical column.

I’m having two issues with my code:

  1. I can’t get the background of the header to extend with the links, so they end up dangling over the jumbotron picture.

  2. There is a bit of blue to the left of ‘Adoptly’ that won’t disappear when the screen size is reduced.

Here is a link to my pen (i’ve never done this before so I hope it works!)


First off, it looks cool. Wish I had pro to do some of these haha. Second, I see what you mean about the bit of blue. You have to make the Adoptly “button” wider to fit that look. However, it might look a little awkward in full view if it is too big. Third, I would suggest playing with the height or padding on the .jumbotron or .header li or .header if it ends up overlapping a little. You might could cause one of them to go opposite of the other one and have the other one stay to get rid of the overlapping.

Also, you might be able to add a float or add an overflow property to your code to deal with the overlapping as well.

Thanks for the ideas! I was able to fix it by playing around with it some more (firebug for the win!) - it definitely helps to get a little space from a project when you get to the point of wanting to strangle your computer! :stuck_out_tongue:

Here’s what I changed:
I took off the height: 80px from .header and .header li (so it would automatically resize when i changed the screen width)

I set the padding and margin-bottom of ul to 0 (they had been defined elsewhere - probably as part of bootstrap)

I changed the padding on .header li to padding: 15px 20px; to that each li would have bottom padding ( since the height was no longer defined)

Now it works beautifully!

1 Like

Ah man that is great! I love it! Excellent job and glad to see it has worked out so nicely!

For future reference, you can normally use the inline property for the < li> elements to keep the horizontal nav bar. I’m most certain that it stays true even through the viewport.

I used inline-block for < li>, however, the elements are too big to fit on a single line once the screen size is reduced. So, my goal was to figure out how to have it remain styled when it was forced on to more that one line by the width of the screen.

1 Like

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