Slight Navigation Change

[creepshowcool]

hi.

I have just bought this new theme http://www.mvpthemes.com/flexmag/ and before I apply it to my website, I would like to change the navigation menu so that it sits centred, and not the full length of the screen. How would I go about doing this?

This is what I want to do in the picture below.

thanks.

[StevenHu]

You might get more answers if you provide the code for the header in relation to the grid of images.

In some way you want to paste the code into the code block that holds the grid of images.

[creepshowcool]

Here is my code if anyone can help.
…

#head-main-wrap {
	width: 100%;
	}

#head-main-top {
	width: 100%;
	z-index: 99999;
	}

#main-nav-wrap {
	float: left;
	position: relative;
	width: 100%;
	height: 50px;
	z-index: 9999;
	}

#main-nav-cont {
	width: 100%;
	}

.nav-logo-out {
	float: right;
	margin-left: -280px;
	width: 100%;
	}

.nav-logo-in {
	margin-left: 280px;
	}

.nav-left-wrap {
	width: 280px;
	}

.nav-logo-fade {
	line-height: 0;
	overflow: hidden;
	padding-right: 0;
	width: 0;
	}

.nav-logo {
	line-height: 0;
	padding-right: 20px;
	width: 200px;
	}

.nav-menu-out {
	float: left;
	margin-right: -123px;
	width: 100%;
	}

.nav-menu-in {
	margin-right: 123px;
	}

nav.main-menu-wrap {
	top: 0;
	width: 100%;
	}

nav.main-menu-wrap ul {
	float: left;
	width: 1000%;
	}

nav.main-menu-wrap ul li {
	float: left;
	position: relative;
	}

nav.main-menu-wrap ul li.mega-dropdown {
	position: static;
	}

nav.main-menu-wrap ul li a {
	float: left;
	font-size: 13px;
	font-weight: 400;
	line-height: 100%;
	opacity: 1;
	padding: 18.5px 14px;
	position: relative;
	text-transform: uppercase;
	}

nav.main-menu-wrap ul li.menu-item-has-children ul.sub-menu li a:after,
nav.main-menu-wrap ul li.menu-item-has-children ul.sub-menu li ul.sub-menu li a:after,
nav.main-menu-wrap ul li.menu-item-has-children ul.sub-menu li ul.sub-menu li ul.sub-menu li a:after,
nav.main-menu-wrap ul li.menu-item-has-children ul.mega-list li a:after {
	border-style: none;
	border-width: medium;
	content: '';
	position: relative;
		top: auto;
		right: auto;
	}

nav.main-menu-wrap ul li.menu-item-has-children a:after {
	border-style: solid;
	border-width: 3px 3px 0 3px;
	content: '';
	position: absolute;
		top: 23.5px;
		right: 5px;

[PaulOB]

That’s a little too complex to do simply. The best you can achieve is to have it centred at the max-width which seems to be around 1400px and then it let gradually expand to 100% as the screen gets smaller.

e.g. Add these rules after the existing rules.

#main-nav-wrap{
max-width:1400px;
width:100%;
margin:auto;
float:none;
}

Or just centre it at max-width instead:

@media screen and (min-width:1620px){
#main-nav-wrap{
max-width:1400px;
width:100%;
margin:auto;
float:none;
}
}

To do it exactly as you wanted you would need to match the media query width changes to the main layout (which are many) and are constantly changing the width of the main layout. You’d need to match those media queries for the nav and then change the width to match,