Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Make color of dropdown/submenu i Menu1 different from parent


  #1  
Old Feb 25, 2013, 06:15 AM
Picturesque's Avatar
Picturesque
 
11 posts · Oct 2010
Norway
Send a message via Skype™ to Picturesque
[SOLVED] Make color of dropdown/submenu i Menu1 different from parent

Hi! I'm working with a page, and I have successfully styled the Page Menu to my liking with the following code.

Code:
#menu1 {
	position: absolute !important;
	margin-top: 470px !important; 
	z-index: 3000;
}

ul.rMenu {
margin-left: 174px;
width: 680px !important;
background: none !important;
}

ul.rMenu li {
    background: none !important;
    margin-right: 15px;
    margin-bottom: 1px;
    border-top: 3px #f7931e solid;
    font-weight: 200 !important;
    font-family: Skranji !important;
}

ul.rMenu li:hover {
    border-top: 3px #f0f0f0 solid;
    background: none !important;
}

/* REMOVE DROP DOWN ARROW */

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
	margin-right:0px;
	}
I want the dropdown menu items to have different background-color, and I can do this with the following code - however it is page ID specific which takes too much time and effort if there is a code for it to make it work on all the sub pages...

Code:
div#menu1 li.page-item-15 a:link,
div#menu1 li.page-item-15 a:visited,
div#menu1 li.page-item-15 a:active
{
background:#f7931e !important;
color:#ffffff !important;
min-height:30px;
font-size: 16px !important;
font-weight: 200 !important;
border-top: 0px !important;
margin-bottom: 5px !important;
}
div#menu1 li.page-item-15 a:hover {
background:#eeeeee !important;
color:#f7931e !important;
}
If you check out my page: http://ursamajors.com/w you can see how this has turned out. You can see that the page with ID 15 is the way I want it, however it still has a white background behind the orange one, which is annoying... How can I remove it? I have helplessly searched for a way to do it, however unsuccessfully.

Anyone?
  #2  
Old Feb 25, 2013, 10:22 AM
Picturesque's Avatar
Picturesque
 
11 posts · Oct 2010
Norway
Send a message via Skype™ to Picturesque
Changed the code to this, but I still have to enter each page ID, and it won't be easy for my friendto add new pages (she is taking over the page after I have "designed" it) as she has no knowledge in CSS.

And still the ul background is white, regardless of the chosen li background-image... annoying.

Code:
/* MENU ITEMS */


	/* OUR MALES */
		div#menu1 li.page-item-15 a:link,
		div#menu1 li.page-item-15 a:visited,
		div#menu1 li.page-item-15 a:active,
	/* OUR FEMALES */
		div#menu1 li.page-item-17 a:link,
		div#menu1 li.page-item-17 a:visited,
		div#menu1 li.page-item-17 a:active,
	/* MOVED DOGS */
		div#menu1 li.page-item-29 a:link,
		div#menu1 li.page-item-29 a:visited,
		div#menu1 li.page-item-29 a:active,
	/* DOGS FORM US */
		div#menu1 li.page-item-31 a:link,
		div#menu1 li.page-item-31 a:visited,
		div#menu1 li.page-item-31 a:active,
	/* ANGELS */
		div#menu1 li.page-item-32 a:link,
		div#menu1 li.page-item-32 a:visited,
		div#menu1 li.page-item-32 a:active 	 
   		
		{
			
    			background: url(wp-content/themes/atahualpa/images/noise_light.png) repeat top left !important;
			color: #eeeeee !important;
			font-weight: 200 !important;
			font-family: "Helvetica Neue", arial, verdana, sans-serif !important;
			padding: 10px !important;	
			font-size: 18px !important;			

		}

		div#menu1 li.page-item-15 a:hover,
		div#menu1 li.page-item-17 a:hover,
		div#menu1 li.page-item-29 a:hover,
		div#menu1 li.page-item-31 a:hover,
		div#menu1 li.page-item-32 a:hover, 
		
		{
			background: #eeeeee !important;
			color: #f7931e !important;
		}
EDIT: And also, the hover color doesn't work.
  #3  
Old Feb 25, 2013, 10:42 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
did you look to see if there is a class that is common to all the links?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Jun 3, 2013, 01:32 PM
SharonJ's Avatar
SharonJ
 
644 posts · Sep 2010
Duncan BC Canada
This works on all without page ids
/*dropdown menu color*/
div#menu1 ul#rmenu2 li ul a {
background:#dfdfdf !important;
border: #dfdfdf;
}

this is a light gray
  #5  
Old Sep 20, 2013, 03:23 PM
SharonJ's Avatar
SharonJ
 
644 posts · Sep 2010
Duncan BC Canada
...and it no longer works
  #6  
Old Sep 20, 2013, 03:30 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
For the border you need width and style along with color (EG border: 1px solid #dfdfdf)
__________________
~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.
  #7  
Old Sep 20, 2013, 03:31 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
@sharonj - so what changed? WP version Atahualpa? what is the url?

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Submenu dropdown covers rest of submenu - how do i get it to the right? Friland Page & Category Menu Bars 6 Feb 19, 2011 01:37 PM
Adding formatting to submenu dropdown kdawes01 Page & Category Menu Bars 10 Feb 10, 2011 09:47 AM
dropdown submenu on same level PascalK Page & Category Menu Bars 3 Jul 16, 2010 06:22 AM


All times are GMT -6. The time now is 02:13 AM.


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