How to Increase Menu Size on my Header

From the admin dashboard, if you go to Appearances > Montezuma Options > CSS Files, menu1.css has all of the CSS settings related to menu1. I would probably add this rule:

#menu1 li {
   height: 108px;
}

That is, I would set the height of all menu items for menu1 using this rule, and the height of the menu1 wrapper should expand to fit.

How do i extend Menu Width…

Currently it is: ” ul#menu1.cf.menu 523px x 88px “

i want to make it as : ” ul#menu1.cf.menu

723px x 98px “

how do i extend the menu. kindly help.

pls do tell me where i can add the code. thanks

Can I ask why you want to change the menu dimensions? That is, is there something wrong with the way it looks now? You first wanted the height to be 108px, but now you want it to be 98px.

The width is going to depend on the class that you assign to the menu wrapper. Go to Appearances > Montezuma Options > CSS Settings and read about the CSS grid system. It is that 12 column grid system that Montezuma is based on, and it allows your site to be responsive. Pay close attention to how to how the column classes have to add up to 12 for each row DIV.

Then you’re going to go to Appearances > Montezuma Options > Sub Templates > header.php. This is the virtual PHP template that determines what the header looks like.

Right now, your heading has a row with two DIVs in it, one for logo-area and the other for menu1-wrapper. The logo-area DIV has a class of col5 and the menu1-wrapper DIV has a class of col7, which is good because 5 + 7 = 12. If you want to make the area for the menu wider, then you just adjust the class assigned to the DIVs. If you are using a 960px grid (which is the default) then each column is about 80px wide. col7, therefore, is 560px wide (7 x 80px = 560px).

You say you want to make your menu 723px wide. That would correspond to about 9 columns (723px / 80px = 9). So you should try changing the class for menu1-wrapper from col7 to col9. To keep the number of columns at 12, though, you then need to adjust the logo-area class from col5 to col3, which means your logo area will be smaller.

If you want, you can just put the menu and the logo on separate rows, then you can make them as wide as you want. But study header.php and see how it formats the look of your header.

If you have other questions about the Montezuma theme, you can post them on their support forum.

The Reason why i wanted to Change the Dimension is i want to add TWO more categories in to the Menu …

Currently i have ( About US, Contact US , Categories , SiteMap ,Privacy Policy )

i want to add two more categories to the Menu : ( Disclaimer , Free Domain)

but when i try to add it , the Menu is extending and going out of alignment… thats the reason…

Can you help me with adding Two More Categories into the Menu list with out the Menu getting extended out of margins.

OK, so go back and read my previous message in its entirety, then read the documentation under CSS Settings to learn how the grid system works. This is very important if you want to understand how different sections on the page get sized. Then you can go to your virtual header.php file and make the changes you need.

You can either:

1. Try and make your menu items smaller so they fit in the allotted space for col7,
2. Change the class ID for menu1-wrapper to a wider column size (col9, as I mentioned earlier), or
3. You can move the menu to a separate row DIV so you would have the entire width of your page to use (set the class ID of the column DIV to col12).

The third option is probably the way I would do it, since it will accommodate any more menu changes in the future.

i tried making changes as you described, but its not suitable…

if i make COL 7 to COL 9 its hiding my LOGO area, and if i reduce my LOGO area COL5 to COL 3 .. then the logo doesnt look good ?? .

can you help me with it via remote desktop… or can you please help me to extend my width of the column correctly.

Well, you only have 960px to work with, so you either have to make the contents of the logo area smaller, the menu items smaller, or move the menu to another line (row) so that it’s underneath the logo area instead of to the side. If you want to move the menu under the logo, create a new row DIV like the one for banner and move the call to wp_nav_menu inside of that (but change the container class to col12 instead of col7).

You can also change the grid from Responsive 960px to Responsive 100%, but that will widen the area of your entire site on wider viewports, and you may not like that appearance.

i would like to put the Menu Bar below the LOGO as you described, can you pls rectify the code for me and send me the exact code.

My header.php code is

<div id="banner-bg" class="cf">
	<div id="banner" class="row">
		<div id="logo-area" class="col5">
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
				<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
			</<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
		</div>
		<?php wp_nav_menu( array(
			'container' => 'nav',
			'container_class' => 'menu-wrapper col7',
			'container_id' => 'menu1-wrapper',
			'menu_id' => 'menu1',
			'menu_class' => 'cf menu',
			'theme_location' => 'menu1',
			'fallback_cb' => 'bfa_page_menu'
		) ); ?>
	</div>
</div>

<div id="breadcrumbs1-bg">
	<nav id="breadcrumbs1" class="breadcrumbs lw">
		<?php bfa_breadcrumbs( 'breadcrumbs1' ); ?>
	</nav>
</div>

Pls do modify the code so that the menu comes below the logo as you described… thanks

<div id="banner-bg" class="cf">
	<div id="banner" class="row">
		<div id="logo-area" class="col12">
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
				<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
			</<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
		</div>
	</div>
	<div id="MenuRow" class="row">
		<?php wp_nav_menu( array(
			'container' => 'nav',
			'container_class' => 'menu-wrapper col12',
			'container_id' => 'menu1-wrapper',
			'menu_id' => 'menu1',
			'menu_class' => 'cf menu',
			'theme_location' => 'menu1',
			'fallback_cb' => 'bfa_page_menu'
		) ); ?>
	</div>
</div>

<div id="breadcrumbs1-bg">
	<nav id="breadcrumbs1" class="breadcrumbs lw">
		<?php bfa_breadcrumbs( 'breadcrumbs1' ); ?>
	</nav>
</div>

So note that I created a new row DIV called MenuRow, and I moved the menu call into it, changing the class to col12. I also changed the class of the logo-area to col12.