Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

Menu with pics inside


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old May 3, 2011, 03:58 AM
Spidey
 
13 posts · Apr 2011
Menu with pics inside

Hello,

I have customized my page menu with this code and it's working pretty well :

HTML Code:
/* ================================================ */
/* how to highlight parent of current page          */
/* ================================================ */
ul.rMenu li.current_page_parent link, 
ul.rMenu li.current_page_parent active, 
ul.rMenu li.current_page_parent hover, 
ul.rMenu li.current_page_parent visited, 
ul.rMenu li.current_page_parent {
background: #05A505 !important;
color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */


ul.rMenu li.current-menu-parent link, 
ul.rMenu li.current-menu-parent active, 
ul.rMenu li.current-menu-parent hover, 
ul.rMenu li.current-menu-parent visited, 
ul.rMenu li.current-menu-parent {
background: #05A505 !important;
color: #000000 !important;
}

ul.rMenu li.current_page_ancestor link, 
ul.rMenu li.current_page_ancestor active, 
ul.rMenu li.current_page_ancestor hover, 
ul.rMenu li.current_page_ancestor visited, 
ul.rMenu li.current_page_ancestor {
background: #05A505 !important;
color: #000000 !important;
}
 

/* For CURRENT */
ul.rMenu li.current_page_item a:link,
ul.rMenu li.current_page_item a:visited,
ul.rMenu li.current_page_item a:active,
ul.rMenu li.current_page_item a:hover {
background: #05A505 !important;
color: #000000 !important;
}

/* For CURRENT */
ul.rMenu li.current-menu-item a:link,
ul.rMenu li.current-menu-item a:visited,
ul.rMenu li.current-menu-item a:active,
ul.rMenu li.current-menu-item a:hover {
background: #05A505 !important;
color: #000000 !important;
}
You can see it here --> http://bit.ly/esa8pJ

Now i want to add some small pics before the countries in the dropdown menu.

I've tried that and it works.
The problem is on mouse over and when the item is selected the pics dissapear.

HTML Code:
ul.rMenu li.menu-item-263 {
padding-left: 30px;
background: url(http://www.senojflags.com/images/national-flag-symbols/France-Flag.png) no-repeat scroll center left #05A505;
color: #000000;
}
Is that a good idea to add the pics like that or is there another way (i mean without CSS) ?
I've tried to add the pics on the MENU config directly in wordpress (by putting <img src" "> in the "Navigation Label" field. It works, but i can't place the pics exactly where i want (does not align with the text).
  #2  
Old May 3, 2011, 04:35 AM
Jam's Avatar
Jam
 
1,067 posts · Mar 2011
Perth, Western Australia
You need to add the same pic or a "hover state" pic (same size etc) to the hover state CSS
  #3  
Old May 3, 2011, 04:52 AM
Spidey
 
13 posts · Apr 2011
I've tried that but it does not work the pics still dissapear:

HTML Code:
ul.rMenu li.menu-item-263 {
padding-left: 30px;
background: url(http://www.senojflags.com/images/national-flag-symbols/France-Flag.png) no-repeat scroll center left #05A505;
color: #000000;
}

ul.rMenu li.menu-item-263 hover {
padding-left: 30px;
background: url(http://www.senojflags.com/images/national-flag-symbols/France-Flag.png) no-repeat scroll center left;

}
  #4  
Old May 3, 2011, 05:42 AM
juggledad's Avatar
juggledad
 
22,154 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
I don't see any of that CSS in the page source - did you remove it?
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #5  
Old May 3, 2011, 06:06 AM
Spidey
 
13 posts · Apr 2011
Yes i've removed the code that does not work.
i'm gonna put it back right now if you want.

(just in case i'm using Atahualpa 3.5.3 and i have apply the 353 BUGFIX)

Last edited by Spidey; May 3, 2011 at 06:20 AM.
  #6  
Old May 3, 2011, 08:59 AM
Spidey
 
13 posts · Apr 2011
Ok i've put the CSS part for the picture online.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Move page menu bar to inside logo area whooploncom Page & Category Menu Bars 1 Dec 21, 2010 04:49 AM
[SOLVED] Would like horizontal menu to span page body (example inside) BackyardHockey Page & Category Menu Bars 6 Oct 25, 2010 10:10 AM
Sidebar pics for wpg2 open solo Stang5_0 Plugins & Atahualpa 1 Jun 26, 2009 02:17 PM


All times are GMT -6. The time now is 07:34 AM.


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