How to get the centered menu to extend the width of the content area

juggledad · #1 Oct 11, 2012, 07:31 AM

When you use %page-centered you will see that the menu is centered but is only as wide as the text of the menus. here is how to make it full width.

1) go to ato->Menu 1 (Page Menu) and copy down the values for:

Code:

   Border around all menu items:  ________________________
   Background color: ___________________________________

2) go to ato->Add HTML/CSS Inserts-CSS Inserts and add the following

HTML Code:

#bfa_page_menu {background-color: cccccccc; border: bbbbbbbb;}
div#menu1 {border: bbbbbbbb; background-color: cccccccc;}
#bfa_page_menu div#menu1 {border: none;}

where cccccccc = the value you wrote down for 'Background color'
and bbbbbbbb = the value you wrote down for 'Border around all menu items'

For example, if your values are

HTML Code:

   Border around all menu items:  solid 1px #000000
   Background color: EEEEEE

then youe CSS would be

HTML Code:

#bfa_page_menu {border: solid 1px #000000; background-color: #EEEEEE;}
div#menu1 {border: solid 1px #000000; background-color: #EEEEEE;}
#bfa_page_menu div#menu1 {border: none;}

That's all you need do.