Increase navigation menu width and centre it

Try following this similar thread.

please post a link to your site to illustrate what you have so far.

you will need to edit style.php of the theme;
the menu has a background graphic which will need to be adjusted.

try working with a browser inspection tool such as Firebug to find out which styles you need to edit.

This is what I’ve got in my style.php so far

Code was:
#topmenu {
margin-top: 5px;
float: right;
clear: both;
}

Changed to :
#topmenu {
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}

No success though but my website is https://iswconsultants.com

To center a block element, you need to add a width.

the div #topmenu is empty, i.e. is not the menu you are trying to change;

start by changing the width and background image in this style in style.php:

.navigation {
background: url(images/navbar.png) no-repeat;
padding-right:0px;
font-size:12px;
position: absolute;
right: 0px;
bottom: 0px;
z-index: 6;
width: 691px;
vertical-align: baseline !important;
height: 48px;
float: right;
}

also will need changes to:

#header #navbar li { float:none; display: inline-block; }
#header #navbar{ float:none; }

and remove the fixed height from:

#header #navbar {
float:left;
height:150px;
line-height:50px;
padding-left:13px;
}

(only checked in Firefox with web developer add-on; not cross-browser tested)

Hi,

Have actioned the above. Please check https://iswconsultants.com. My grey area behind my “menu” is too short.

Please could you assist? Thanks

We can’t assist you for this issue, you must expand your background image width.
https://iswconsultants.com/wp-content/themes/wp-creativix/images/navbar.png

Ok, figured it out. Just had to get my head around the fact that you have to adjust the “space” size and then amend and upload a image to fit that space.

Thank you!