Hi all,

I am working in a site with slightly altered page menu and I am using Juggledads colored menu sheat sheet as a help.
I want the page menu horizontal just below a music score. And the first menu item had to be shifted a little bit to the right. The idea is that the first menu text comes below the first notes.
The site is: http://www.kerkkooramdg.nl/
I managed shifting the menu to the right by making the following css inserts:

/* ----- Aanpassingen aan menu 1 (page menu) (using Jd menu cheat sheet)----- */
/* ----- The category part is left out; we are not (yet) using categories ----- */

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 20px; /* left out Category part; otherwise use 40px */
margin-top:0px;
background: blue;
padding-left:40px;
background: #F2E1E2;
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background: #F2E1E2;
border: none 0px;
}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li {
background: #F2E1E2;
width:168px;
text-align:center;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

But now the menu items have some overlap which i am not able to get solved.
The whole menu is not reacting as it should.

Hope anyone can give me a direction..

Btw, a great theme, so many options...

Bert

Instead of using CSS to position the menu did you try using %page-center?

Hi lmilesw,
Thank you for the reaction.
I tried that right now, but then the menu items becomes smaller and cropped in the middle.
I would like to see a menu bar as wide as the music bar, but where the first menu-item starts about 50px left from the edge.
Hope i make my myself clear?
Maybe i should combine the two options? The %page-center with css options?

I think can make the music bar higher with more white at the bottom side, and then project the menu on top of the bottom part of the music-bar.
But that leaves me with the menu items close to each other in the middle; I would like to see them spread under the music staff.

Problem is when i put the width:148px; in the css by the page menu item "ul.rMenu li{}"
Then things are becomming weird.

Found this post from Juggledad: http://forum.bytesforall.com/showthread.php?t=18643
gave it a try but it did not make the menu full width...

in CSS inserts:

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

are you sure you put it in the CSS inserts and hit 'save'? I don't see it in the css.
that code extends the background color to the widto of the site.

I am sorry Juggledad, but i have a second test site where i tried this.
Forgot to put it on the url which i communicated.
But i have done that now. Hopefully you can help me.

I think i misunderstood purpose of the code.
It does bring the background color to the total width of the bar.
But what i need is the menu items divided over the bar as well, but starting about 50px from the left.
I do not want menu text under the key of the staff...

Any idea how i could realize that?

you will have to play with the padding and/or margins css for the ul and li's of the menu.
unfortunately there is no easy way to evenly divide the space (that I know of)

Hello Juggledad and Larry,
Thanks for your help so far. I think i have a workable solution now.
I definitely wanted a solution in the CSS-inserts, and not poking around in the php code files.
Now i can concentrate on the other stuff; graphics etc..

#bfa_page_menu {border: solid 1px #F2E1E2; background-color: #F2E1E2;}
#bfa_page_menu div#menu1 {border: none;}
/* ================================================ */
/* Page menu background * * * * * * * * * * * * * * */
/* ================================================ */
div#menu1 { * * * * * * * * /* custom menu centered */
	height: 20px; *
	margin-top:0px;*
	padding-left:40px;
	border: solid 1px #F2E1E2;
	background-color: #F2E1E2; * * *
}
/* ================================================ */
/* Page Menu item's background and border * * * * * */
/* ================================================ */
div#menu1 ul.rMenu {
	background: #F2E1E2;
	border: none 0px;
}
/* ================================================ */
/* Page Menu item's down arrows removed* * * * * */
/* ================================================ */
div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
}
/* ================================================ */
/* Page Menu item * * * * * * * * * * * * * * * * * */
/* ================================================ */
ul.rMenu li a:link,*
ul.rMenu li a:visited,*
ul.rMenu li a:hover,*
ul.rMenu li a:active,*
ul.rMenu li {
	background: #F2E1E2;
	width:146px;*
	text-align:center;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

You still have the RSS link and search box showing off to the side.

Hi Larry,
Yes I have it adjusted. It's because I have an off-line version and i quickly put it on-line so you and Juggledad could eventually take a look at the issue.
Thanks for helping me so far!
Grtz, Bert