Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Problem with positioning page menu items


  #1  
Old Feb 27, 2013, 06:20 AM
deltabert's Avatar
deltabert
 
9 posts · Oct 2012
Culemborg, The Netherlands
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
  #2  
Old Feb 27, 2013, 07:06 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Instead of using CSS to position the menu did you try using %page-center?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Feb 27, 2013, 12:59 PM
deltabert's Avatar
deltabert
 
9 posts · Oct 2012
Culemborg, The Netherlands
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?
  #4  
Old Feb 27, 2013, 01:08 PM
deltabert's Avatar
deltabert
 
9 posts · Oct 2012
Culemborg, The Netherlands
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.
  #5  
Old Feb 27, 2013, 01:18 PM
deltabert's Avatar
deltabert
 
9 posts · Oct 2012
Culemborg, The Netherlands
Problem is when i put the width:148px; in the css by the page menu item "ul.rMenu li{}"
Then things are becomming weird.
  #6  
Old Feb 27, 2013, 01:29 PM
deltabert's Avatar
deltabert
 
9 posts · Oct 2012
Culemborg, The Netherlands
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:
HTML Code:
#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;}
  #7  
Old Feb 27, 2013, 01:43 PM
juggledad's Avatar
juggledad
 
23,630 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Feb 27, 2013 at 01:49 PM.
  #8  
Old Feb 27, 2013, 03:05 PM
deltabert's Avatar
deltabert
 
9 posts · Oct 2012
Culemborg, The Netherlands
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.
  #9  
Old Feb 27, 2013, 03:09 PM
deltabert's Avatar
deltabert
 
9 posts · Oct 2012
Culemborg, The Netherlands
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?
  #10  
Old Feb 27, 2013, 03:27 PM
juggledad's Avatar
juggledad
 
23,630 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Feb 28, 2013, 07:35 AM
deltabert's Avatar
deltabert
 
9 posts · Oct 2012
Culemborg, The Netherlands
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..


HTML Code:
#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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
  #12  
Old Feb 28, 2013, 08:12 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
You still have the RSS link and search box showing off to the side.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old Mar 1, 2013, 04:52 AM
deltabert's Avatar
deltabert
 
9 posts · Oct 2012
Culemborg, The Netherlands
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem: Width of sub-menu items is not 100% logocar3 Page & Category Menu Bars 6 Dec 5, 2011 05:44 AM
problem with %page-right menu positioning NicGuestJelley Page & Category Menu Bars 5 Jul 30, 2010 04:12 PM
Problem changing the background color of just one of the page menu items\buttons Thomas Page & Category Menu Bars 3 Jun 6, 2010 05:38 PM


All times are GMT -6. The time now is 09:57 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.