Adjustable menu box width?

[AlanJones]

Firstly let me say how good I think EB&MM Pro is. Easy to use and implement on web pages.

My question relates to the menu bar width. In the Top Menu settings there is the tick box to make the menu full width. Un-ticked the menu is just the width of the menu items. Is there a way of adjusting the menu box width apart from these two options?

I mainly work with Dreamweaver (so sites are not responsive as such) but what I tend to do is make elements as a specific percentage of the browser window size. That way they scale well to fit the browser windows of different sized screens (10", 7", 5") such as iPad or iPhone.

So if I make a web page to be 70% of the browser window (to give some white space at the edges) can I do the same withe menu box? I have tried inserting the code within a table cell to achieve this but it just seems to break the css code

Thanks for any help anyone can give.

Alan

[Aivars]

You could manually edit (or override in the custom css file) the menu with by replacing 100% with any other value that you need. If you gave link me to your page, I could help you by telling exactly what line to add to CSS.

[AlanJones]

Ok, I think I figured out how to to change the %ge width of the menu box (maybe not the most elegant way). In this case it needs to be 60% of the browser window. What I would like to do now is make it centred within the browser window. I have tried various bits of CSS code but it still remains on the left side.

If it works better to have it set full width but then alter the CSS so that full width becomes 60% of the window that would be fine also.

the web page can be found at: http://activtech.co.uk/index2.htm
Or, similar but with full width menu: http://activtech.co.uk/index3.htm

Thanks in advance.

Alan

[Aivars]

For the index2 version this will work - wrap the whole menu into additional <div style="text-align: center">...</div> and add additional style to the menu - display: inline-block, like so:

Code: Select all

<div style="text-align: center">
<div id="mbmain_menuebul_wrapper" style="max-width: 60%;display: inline-block;" class=" scripted">
...
</div>
</div>

[AlanJones]

That worked perfectly Aivars.

Thank you very much.

Alan