Member Avatar for RunTimeError

Hey guys. Got a pretty simple question about getting my navigation DIV to stay in one spot. I've got a DIV that I have given a height and width of 100% and a fixed position to. I also have a background image aligned to center in this div. My problem is I am trying to have my navigation bar STAY in the same spot just above the background. I can correctly position it when the browser is maximized but when the browser window is resized my navigation bar does not stay in the same spot and 'moves' over the top of the image the smaller you make the browser. Once the browser is maximized it returns to the correct position. My HTML:

<div class="wrapper">
		<div style="nav">
			<ul>
				<li><a href="default.html">Home</a></li>
				<li><a href="news.html">News</a></li>
				<li><a href="contact.html">Contact</a></li>
				<li><a href="about.html">About</a></li>
			</ul>
		</div>
	</div>

My .css

.wrapper 
{
	position:fixed;
	height:100%;
	width:100%;
	background-image:url(images/dumbBells.jpg);
	background-repeat: no-repeat; 
	background-attachment:fixed;
	background-position:center;
	background-color:#262626;
}
.container
 {
	width: 981px;
	height:1000px;
}
.nav
{	
	position:fixed;
	width:200px;
	right:100px;
}

I've tried everything to get this thing to work! I thought 'position:fixed' would solve the problem but it still 'moves' when you resize the browser. How do I get to 'STAY' or be 'anchored' in the same spot I have specified in the '.nav' class? Would appreciate any comments or suggestions!

  • 2 Contributors
  • 2 Replies
  • 268 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by RunTimeError

Dani AI

Generated

Short summary and diagnosis: the navigation was moving because it was being positioned relative to the viewport or to an element that was not sized/positioned the way the background image was. Two specific issues stood out from the thread: the HTML used an invalid attribute where a class was intended (so the nav rules might never have applied), and background-attachment: fixed / a fullscreen fixed container will pin the image to the viewport, making any overlay positioned relative to the page look out of sync when the window size changes.

A robust pattern is to make the image and the overlay part of the same positioned container so the nav can be positioned against that container (not the viewport). Example approach (different class names than the original posts):

<div class="hero">
  <img src="images/dumbBells.jpg" alt="hero">
  <nav class="overlay-nav"> ... </nav>
</div>

.hero { position: relative; max-width: 1200px; margin: 0 auto; }
.hero img { display: block; width: 100%; height: auto; }
.overlay-nav { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); z-index: 10; }

If keeping the image as a CSS background instead, remove background-attachment: fixed (it ties the image to the viewport) and place the nav absolutely inside a relatively positioned wrapper. Use background-size: cover and background-position: center for responsive centering, and use percentage/top/left with transform to keep the nav anchored over the same visual point as the image scales.

Troubleshooting checklist: validate the HTML (replace the invalid style="nav" with class="nav" or use <nav>), inspect computed styles in developer tools to confirm which positioning rules apply, toggle position on the parent (relative) and child (absolute) to see the difference, add a temporary border to visualize containers, and ensure z-index places the nav above the image. As suggested, position:absolute is often the right choice — but only when the containing element is positioned. Moving the graphic into the markup (as did) is also a simple, reliable fix for many layouts.

Recommended Answers

All 2 Replies

Member Avatar for Kraai

Try

position:absolute;

and let us know!

Member Avatar for RunTimeError

Hey thanks. So I ended up just moving the background image into it's own image tag and it works now.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.