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 »

use image for menu


  #1  
Old Oct 21, 2011, 02:55 PM
tmd_2008
 
9 posts · Oct 2009
I cannot figure out how to use my two images for the menu navigation.

I have one image I want to use as the background, and another I want to use as the hover and active page.

I am working on making a client's website using Wordpress. Currently, I just use static html.

I cannot figure out how to over ride the Atahualpa theme options for the menu. I have looked at other posts with some example CSS, but it just has not worked.

The current static website is http://www.mpbc-indy.org. I want the menu for the Atahualpa theme to look like this menu.
  #2  
Old Oct 21, 2011, 04:12 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
To do what you want I would...
  • Build your basic menu with the dark background
  • Determine the selectors (I use Firebug)
  • Apply the necessary CSS
You will be using a hover class and a current menu class.

If you aren't too familiar with CSS this will be a challenge and even with the CSS knowledge would take a bit of time to build.

If you get your site up and start the process perhaps we can help with hints but without the site up giving you more info than that is difficult.

Here is some code to give you an IDEA of how to proceed. You may have to use !important as shown for some code to override code that is there. I added a height to the menu as a whole because when you hover it would push down whatever is under the menu if you didn't give it that room. The padding is so the words move down on hover. The colors and dimensions are of course arbitrary.
HTML Code:
#rmenu2 li a:hover {
    background: black !important;
    height: 30px;
    color: white !important;
    padding-top: 40px !important;
}
#rmenu2 {
    height: 130px;
}
__________________
~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, 2011, 06:53 AM
tmd_2008
 
9 posts · Oct 2009
If it helps, I can post my CSS for the menu on http://www.mpbc-indy.org.


#menu { margin-top:35px; height:78px;}
#menu li { float:left; margin-right:1px}
#menu li a{ display:block;font-size:16px; color:#fff; text-transform:uppercase; background:url(images/menu.jpg) top repeat-x; padding:0 28px; line-height:46px; text-decoration:none}
#menu li a:hover, #menu #menu_active a{ background:url(images/menu_Aactive.jpg) top repeat-x; line-height:78px;}

I will try and work with the example you gave me. If the CSS above helps, all the better. Thanks in advance.
  #4  
Old Oct 24, 2011, 09:19 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Without seeing the site all is just guessing. It comes down to having a background image for a and a:hover and then using CSS to style it as you want.
__________________
~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.

Bookmarks

Tags
menu background image

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Image background for menu bar AND different background for current page menu button kippiper Page & Category Menu Bars 11 Jan 11, 2013 08:45 AM
[How To] Replacing the Atahualpa header image with a 'sliding door' image menu jack96161 Header 57 May 17, 2012 07:41 AM
How to replace header image and menu with image map? Yeeh Atahualpa 3 Wordpress theme 2 Nov 11, 2011 05:31 AM
[SOLVED] image in pages menu or bages menu in to header image johnnybravo Header configuration & styling 1 Jun 7, 2011 04:47 AM
Page menu bar: first menu item as a image unelma Page & Category Menu Bars 2 Dec 4, 2009 11:52 PM


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


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