Max Width to Fill Screen & Center Menu Buttons

[dgideon]

Greetings,

First, thanks for creating your SmartMenus and sharing them with the rest of us. I love that they work as an addon with Bootstrap.

My question is in regards to the blue theme, what do you feel is the best way to make it so that the blue gradient extends to fill the entire width of the screen, and then center the buttons on the page?

[admin]

Hi,

First a note since you mention Bootstrap – if you are using the Bootstrap add-on the menus will use the Bootstrap theme (whatever it is). The “sm-blue” theme (class) is not supposed to be used in combination with the Bootstrap add-on.

If you are not using the Bootrap add-on, you can center the items of a horizontal main menu with some additional CSS – a sample code is posted in the following discussion:

http://www.smartmenus.org/forums/topic/smartmenu-dropdown-doesnt-work-if-main-menu-is-display-inline

As for taking the full width – a horizontal main menu would take the full width of its container by default since we have the following styles by default on the demo page:

#main-menu {
	position:relative;
	z-index:9999;
	width:auto;
}

So it depends in what container you would put it and if it would have any margin/border/padding applied. Or you could also change its positioning to something like (which would work on the demo page with the “sm-blue” theme but might not work with some specific layout, of course):

#main-menu {
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	width:100%;
}

Cheers!

[Author]

Posts