Having some problems with my navigation bar

HTML & CSS
1

Hello,

So I am having a few problems with the navigation bar on my site. I was having loads of problems with it as , and I just decided to put it to the side for a while. But I really need to get it fixed now.

Anyway I am having some huge problems with positioning it, and also I want to make it so that instead of just repeating the background image and looking bad, it changes the size of it instead so it is just the same image.

I want it to look like this:

It currently looks like this:

And here is the CSS:

ul {
	margin:0;
	padding:0;
	list-style:none;
}
.wrap {
	width:90%;
	background-image: url(images/navbarbackground.png);
	margin:auto;
	box-shadow:5px 5px 20px rgba(0,0,0,0.3);
	padding:0px;
	font-family:minecrafter;
}
.wrap:after{
	content:" ";
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
}
.wrap ul {
	display:table;
	width:95%;
}
.wrap li {
	display:table-cell;
	vertical-align:middle;
}
.wrap li a {
	text-decoration:none;
	background-color:#EEEEEE;
	color:#333333;
	padding:6px 0 6px 0;
	border:1px solid #CCC;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	font-color:#282828;
	display:block;
	text-align:center;
}
.wrap h2 {
    margin-top:10px;
	margin-bottom:10px;
	text-transform:uppercase;
	color:#ffffff;
	width:6em;
	text-align:center;
	line-height:1.0;
	letter-spacing:.04em;
	display:in line-block;
	vertical-align:middle;
	float:left;
}
.wrap h2 span {
	display:block;
	letter-spacing:.15em;
}
.navwrap {
    margin-top:0px;
	overflow:hidden;
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:10px;
}

Html:

<div class="wrap">
		            <h2 class="minecrafter" style>Miners <span>Union</span></h2>
						<div class="navwrap">
							<ul class="nav">
								<li><a href="#">Home</a></li>
								<li><a href="#">Forums</a></li>
								<li><a href="#">Donate</a></li>
								<li><a href="#">Apply</a></li>
								<li><a href="#">Map</a></li>
							</ul>
						</div>
                </div>

Any help is appreciated. Fyi I’m not much of a professional web designer, I’m still under 18, just trying to learn how to code :slight_smile:

Thanks

2

As far as the background image goes, you’ll want background-size contain/cover. I can’t see the image you are using since it’s not included but you can play with that.

http://www.w3schools.com/cssref/css3_pr_background-size.asp

3

Thanks, I used that and got it to stop repeating. I just need to position it properly now.

4

Need help?

5

If you could that would be great thanks

6

What positioning problems are you having? Where is it now and where would you like it?

Can you go to codepen.io, throw up the HTML/CSS, upload the background image to tinypic.com and make sure you get a workable demo? It would help us see where exactly you would like things.
Edit-This had 502 @cpradio

7
Off Topic:

We know we still have problems with this

8

He asked earlier if I got 502s on a post and I didn’t, so I wanted to let him know that it’s occasional. I’ve been keeping him up to date-ish.
Edit-502

1 Like
9

Sorry for the late reply but I got everything working now, thanks for your help :slight_smile:

10

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