how to change menu width?

Could you explain more what you mean by “make the menu as wide as content in featured page” and link to your site to show us what you mean?

Thanks for your reply. I am working on my site on my computer. After I centered menu and changed the menu background color to grey. The grey bar crosses the whole browser from left to right. The content between front page slider and footer looks like all fitting in a frame. I want the grey bar is as wide as the frame.

I think that the grey bar that you’re talking about is the bottom border of the header. You can switch it off with:

.tc-header {
    border-bottom: none;
}

You can then add a top border to the #main-wrapper (which contains the reduced-width content) with:

#main-wrapper {
    border-top: 10px solid #E9EAEE;
    margin-top: 0;
}

Is that what you mean? If not, can you make a modified screengrab of what you want?

I found an example from Customizr showcase: https://www.joe-the-baker.com/.
The menu has black background. I want the black bar is always as wide as the slider under it even when I resize browser.

If you find a site you like that is based on Customizr (or even one not based on Customizr), you can use Firebug (or Chrome/Safari developer tools) to see what the site designers did in their CSS file. See this link for a video on Firebug. You can then inspect any element to see what they did to get the effect.

Some more radical changes to layout—with the slider after the features, for example—may have been done with php behind the scenes. But changes to the styling are in CSS and are always there for everyone to see: if your browser can render it then you can see it.

The really neat thing about Firebug is that you can click the CSS tab, look at all the CSS in a child-theme or Custom CSS, and then switch it on/off by clicking to the left of each property declaration. That helps you see bit by bit what each CSS property is doing.

So in the case of the site you like, you can see that the designers stopped the logo floating left (with a float:none;), then as a result the .navbar-inner wrapped onto the next line. They then styled the navbar black etc and made it wider using:

.row-fluid .span9 {
    width: 95%;
}

However, I don’t agree that this is the best way to make the navbar wider, as using the 'row-fluid .span9 classes is not specific enough and could have significant unintended consequences elsewhere on the site. It’s much better to instead use:

.navbar-wrapper .span9 {
    width: 95%;
}

You can find lots of other styling tips in the Customizr FAQ.

Thank you ElectricFeet for taking the time to help me. I know a little about coding and new to WordPress and Customizr. I installed firebug and will find out how to use it. I put the code in child CSS, it did not work. However I could change menu width with

navbar-inner {
position: relative;
width: 70%;
left: 15%;
}

But it only looks good in full screen size browser window. I guess I need to look more into it.

This snippet should help