Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Justin Riestra
Justin Riestra
4,904 Points

CSS Positioning Issue

Hi All,

Struggling a bit with positioning my nav bar at the lower right corner of my main header image. I actually have the nav bar correctly positioned (using CSS {position} selector), however when I shrink the browser, the nav bar simply remains fixed (therefore out of view) while the rest of the page flexes just fine.

Any help? Code posted below! Thanks in advance.

/**************** GENERAL ****************/

wrapper {

margin: auto 0; }

a { text-decoration: none; color: #000000; }

img { max-width: 100%; }

/**************** HEADER ****************/

.header { margin: 0 auto; padding: 0; }

main-header img {

width:100%; height: 80%; }

logo {

margin: -70px 0 0 5px; text-align: left; padding-right: 0; width: 300px; }

#logo h1 { font-family: 'Abril Fatface', cursive; }

logo h2 {

line-height: 5px; font-size: .90em; font-family: 'Cinzel', serif; margin: -20px 0; }

navlist {

display: block; width: 300px; height: 25px; font-size: 14px; text-align: right; position: relative; left: 845px; bottom: 5px; }

navlist li {

display: inline-block; font-family: 'Cinzel', serif; }

1 Answer

Francisco Osegueda
Francisco Osegueda
11,114 Points
Francisco Osegueda
Francisco Osegueda
11,114 Points

Hi, Justin. When you use "left: 845px; bottom: 5px; " in the navlist makes the navbar to be fixed in that position. Try removing them and use media queries instead. Hope this helps.

Justin Riestra
Justin Riestra
4,904 Points

Thanks Francisco!

I ended up positioning the navbar as "relative" but not specifying any actual position changes. Then floated the bar to the right, pulled it up using a negative 'margin-top' and 'z-indexed' it so it sits on top of the image. It's working! I'm sure there's a simpler way, but it suffices for now.

navlist {

display: inline-block; width: 300px; height: 25px; font-size: 14px; text-align: center; float: right; position: relative; z-index: 1; margin-top: -5px; }