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 » Page & Category Menu Bars »

Bring up the menu


  #1  
Old Oct 23, 2012, 01:31 PM
Viktoria's Avatar
Viktoria
 
77 posts · Jun 2012
Hello,
I want to bring up the menu up a bit more to be roughly lined up with the logo, I tried to add some padding code but it does not work.

Example: http://www.billieshimoni.co.il

I use CSS codes:
ul.rMenu {
padding:0px !important;
list-style:none !important;

}
ul.rMenu li {
margin-top:0px !important;
padding:0px !important;

}
ul.rMenu li a {
margin:0px !important;
padding: 0px 15px !important;
color:#f4f4f4 !important;
font:bold 18px Arial !important;
text-decoration:none !important;
border: solid 0px #FFFFFF;
border-right: 0px solid #aaaaaa;
border-left: 0px solid #aaaaaa;

}

div#menu1 ul.rMenu li {
background-color: transparent;


}
div#menu1 ul.rMenu {
background-color: transparent;

}
div#menu1 ul.rMenu li:hover > a,
ul.rMenu li a:hover {
color:#f4f4f4 !important;
border-right: 0px solid #aaaaaa;
color:#ff4b33 !important;
background-image: URL('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/MENU.jpg') !important;

}
ul.rMenu li.current_page_item a {
color: #f4f4f4 !important;
background-image: URL('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/MENU.jpg') !important;
}

#menu1 {
width: 999px !important;
}

div#menu1 {
border-bottom: 0px solid #461D7C;
background-image: URL('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/MENU.jpg') !important;

}

Thank you.
  #2  
Old Oct 23, 2012, 02:36 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Use absolute positioning for #rmenu2
__________________
~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 Oct 24, 2012, 04:05 AM
Viktoria's Avatar
Viktoria
 
77 posts · Jun 2012
#rmenu2 {
position: absolute;
top: 115px;
height: 115px;
}

This code?

Thank you
  #4  
Old Oct 24, 2012, 05:53 AM
Viktoria's Avatar
Viktoria
 
77 posts · Jun 2012
I have another question on the subject,
How can I make a menu so that it is exactly the image with lines between each category
The sub-menu will be transparent like the picture?
I tried to use my code but it does not look good.

What's wrong with my code? Or some code I can add?

ul.rMenu {
padding:0px !important;
list-style:none !important;

}
ul.rMenu li {
margin-top:0px !important;
padding:0px !important;

}
ul.rMenu li a {
margin:0px !important;
padding: 0px 15px !important;
color:#f4f4f4 !important;
font:bold 18px Arial !important;
text-decoration:none !important;
border: solid 0px #FFFFFF;
border-right: 1px solid #f4f4f4;
border-left: 1px solid #f4f4f4;

}

div#menu1 ul.rMenu li {
background-color: transparent;


}
div#menu1 ul.rMenu {
background-color: transparent;

}
div#menu1 ul.rMenu li:hover > a,
ul.rMenu li a:hover {
color:#f4f4f4 !important;
border-right: 1px solid #f4f4f4;
border-left: 1px solid #f4f4f4;
color:#ff4b33 !important;
background: #575c60 !important;

}
ul.rMenu li.current_page_item a {
color: #f4f4f4 !important;
background: #575c60 !important;


}

#menu1 {
width: 999px !important;
}

div#menu1 {
border-bottom: 0px solid #461D7C;
background: #575c60 !important;

}
#rmenu2 {
position: absolute;
top: 115px;
height: 115px;
}
.sub-menu {
top: 22px !important;
}
.sub-menu li {
background: transparent url('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/MENU.jpg');
opacity: 0.65;
width: 100% !important;
text-align: right;
border-right: 0px solid #575c60;
border-left: 1px solid #575c60;
}

Thanks for everything

Last edited by Viktoria; Jul 31, 2013 at 10:41 AM.
  #5  
Old Oct 24, 2012, 07:40 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
To get the lines you may have to play with borders on the list items. For a transparent background I suggest using a semi transparent png as opacity will affect the text as well as the background.
__________________
~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.
  #6  
Old Oct 24, 2012, 08:54 AM
Viktoria's Avatar
Viktoria
 
77 posts · Jun 2012
Thanks for the reply, but unfortunately it does not work.
I tried to put a semi transparent png and Agein it not transparent.
This can be done another way?

Thank you.
  #7  
Old Oct 24, 2012, 02:04 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
You also have to make sure the background color is transparent along with the semi transparent png file. Also I can't get to your site.
__________________
~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.
  #8  
Old Oct 24, 2012, 03:31 PM
Viktoria's Avatar
Viktoria
 
77 posts · Jun 2012
I added the code and again it does not work, seems to me there is a problem in my code, but I do not know where.

.sub-menu {
top: 22px !important;
}
.sub-menu li {
background: transparent url('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/semi_transparent6.png');
background-color: transparent;
width: 100% !important;
text-align: right;
border-right: 0px solid #575c60;
border-left: 1px solid #575c60;
}

Site url: http://billieshimoni.co.il.preview8.logate.co.il

Thanks for your help.
  #9  
Old Oct 24, 2012, 05:13 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
You may have to add !important to the background image line. You also don't need the background-color line since the color is included in your shorthand.
__________________
~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.
  #10  
Old Oct 25, 2012, 03:08 AM
Viktoria's Avatar
Viktoria
 
77 posts · Jun 2012
It's still not working
I fixed as you said:

.sub-menu {
top: 22px !important;
}
.sub-menu li {
background: transparent url('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/transparent1.png') !important;
width: 100% !important;
text-align: right;
border-right: 0px solid #575c60;
border-left: 1px solid #575c60;
}
  #11  
Old Oct 25, 2012, 05:37 AM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
two things
1) you have two lines of dashes in the CSS inserts. these are not valid comment lines and can cause havoc with some browsers causing everything else to be ignored. if you want a line of dashes, it should be
HTML Code:
/* --------------------- */
2) I noticed you have the following in the CSS Inserts
HTML Code:
#footer {
padding:10px 0 40px 0;
font-size:11px;
overflow:hidden
}
and it is being ignored. "Why?" you might ask yourself. The answer is that theere is a more specific CSS Selector (td#footer) that is taking precidence. It is a good idea to understand how CSS Precidence works. Wirh a google search you should be able to find some explainations.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Oct 25, 2012, 06:16 AM
Viktoria's Avatar
Viktoria
 
77 posts · Jun 2012
Thanks for the help, every time I learn something new , I corrected it. But again, no drop-down menu becomes transparent. I want the drop-down menu will be like the picture. Why is it not working? It's so complicated to do this?
The site picture, was built in WordPress, maybe can see how transparent drop down menu built there?
http://www.marc-michaels.com
  #13  
Old Oct 25, 2012, 07:28 AM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
it uses
HTML Code:
background: none repeat scroll 0 0 rgba(57, 62, 65, 0.9);
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Oct 25, 2012, 10:16 AM
Viktoria's Avatar
Viktoria
 
77 posts · Jun 2012
This code does not not work, he makes a white menu.
Well thanks for the help, I will do a regular menu.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How can I get rid of dark grey menu bar and bring the other down some jstein Header configuration & styling 1 Oct 14, 2010 05:31 PM
Can't adjust Center Column to bring the margins in a bit. jstein Center area post/pages 2 Sep 19, 2010 06:02 AM
[SOLVED] All admin links bring me to 'page not found'? How do I fix the per machepap Atahualpa 3 Wordpress theme 9 Mar 5, 2010 12:31 PM


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


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