Menu stretching the whole way across.

  • Hi all,

    I’m trying to make the menu strech all the way across the site but leave the text central.

    I’m pulling my haird out at what i’m doing wrong. I’m using the gamepress pro theme the link is:

    I’ve put alot of chopping and changing but can’t get it right.

    Can anyone save my day please?

Viewing 4 replies - 1 through 4 (of 4 total)

  • Don’t pull your hair out. Usually not a good look for anybody.

    We’ll figure this out. You’re talking about the blue menu bar right?

    Do you have it set at 100% or a specified number of pixels?

    Thread Starter monster-it

    (@monster-it)

    /*This is for footer*/
#footer-border{
	height: 0px;
}
#footer-inner {
	width: 100%;
	position: relative;
    bottom: -16px;
	margin: 0 0 16px 0;
	background: #3461b7 url("nav-blue.png") repeat-x 0 top;
	background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#3461b7),color-stop(100%,#244386));
	background-image: -webkit-linear-gradient(#3461b7,#244386);
	background-image: -moz-linear-gradient(#3461b7,#244386);
	background-image: -o-linear-gradient(#3461b7,#244386);
	background: -ms-linear-gradient(top, #3461b7 0%,#244386 100%);
	background: linear-gradient(#3461b7,#244386);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 2px 10px rgba(0,0,0,0.35);
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.35);
	box-shadow: 0 2px 10px rgba(0,0,0,0.35);
	display: block;
}
/* Main Navigation */

#primary-nav, #primary-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
	list-style-position: outside;
}
#header nav {
	width: 100%;
	position: relative;
    bottom: -16px;
	margin: 0 0 16px 0;
background: #3461b7 url("nav-blue.png") repeat-x 0 top;
	background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#3461b7),color-stop(100%,#244386));
	background-image: -webkit-linear-gradient(#3461b7,#244386);
	background-image: -moz-linear-gradient(#3461b7,#244386);
	background-image: -o-linear-gradient(#3461b7,#244386);
	background: -ms-linear-gradient(top, #3461b7 0%,#244386 100%);
	background: linear-gradient(#3461b7,#244386);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 2px 10px rgba(0,0,0,0.35);
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.35);
	box-shadow: 0 2px 10px rgba(0,0,0,0.35);
	display: block;
}

    That’s what i’ve got on my child css sheet.

    Thread Starter monster-it

    (@monster-it)

    Thank you by the way.

    I can’t find a terribly good way to save my css changes, but I can just tell you what I did to make it look right…

    I added a rule to the ul element to set text-align: center. Then I removed the “float: left” and the borders from the li and the a elements, and I added a “display: inline-block” to the a element. And last, I changed the border-radius property on the hover effect for the a element to be just 6px to round all the corners, since I removed the lines between elements.

    Let me know if that works for you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Menu stretching the whole way across.’ is closed to new replies.