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 »

Extending the header image into the page menu bar

Prev Previous Post   Next Post Next
Old Aug 13, 2012, 10:19 AM
1 posts · Sep 2010
Extending the header image into the page menu bar

G'day all

I searched about for a means to flow my header image over an unsed section of my menu bar just a a means of dare I say it "cool". Or something.

I started with the old image slicing trick to create both my header and menubar images. Both are 1280 wide. The header started at 180 high, but then I sliced off the bottom 30 to create the menu bar image as my bar is sized at 30 high. Thus I have two images header at 1280x150 and menubar at 1280x30. All sizes in pixels of course.

Dropping the header image in was not tough as you all know. Just upload to the images>header area and leave a single image there. I placed the menubar image in the atahualpa>images directory for easy locating.

But now what? I toyed and pushed and pulled and finally arrived at the following that I entered into the CSS inserts area:
div#menu1 {border:0 !important;}
ul.rMenu {background-image: url('http://www.n30pharma.com/test/wp-content/themes/atahualpa/images/menubar.jpg') !important;}

The first item removes the menubar border entirely. The second sets the menu bar background using my sliced image.

See my test site here: http://www.n30pharma.com/test

Not exactly perfect, but pretty close.

Lovely, but what if I want to use a different image on interior pages. I search around again, found a plugin, but decided against it. My aim was to have an interior image for each submenu so I made note of each page-id (e.g. #13 for the empty About page).

Then I again created another sliced image pair and added a touch more CSS as follows:
body.parent-pageid-13 div#imagecontainer {background-image: url('http://www.n30pharma.com/test/wp-content/themes/atahualpa/images/header2.jpg') !important;}
[indent]body.parent-pageid-13 ul.rMenu {background-image: url('http://www.n30pharma.com/test/wp-content/themes/atahualpa/images/menubar2.jpg') !important;}

Note that I have to use !important.

All this gives every impression of working albeit we might argue that it is a maintenance nightmare. The site is not deep so perhaps more of a bad dream than a nightmare, eh?

Now a question to the group - is the CSS rational? Is there a very much better way of accomplishing this lovely trick? I look forward to the discussion. My thanks for listening.


(WP: 3.4.1 A: 3.7.7.)

Last edited by nthrzerp; Aug 13, 2012 at 10:32 AM. Reason: Version #s


header, image, menubar

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Background menu image not extending into child (drop down) menus tim55057 Page & Category Menu Bars 1 Nov 29, 2011 05:35 PM
Extending the Header area past the website padding nilex Header configuration & styling 1 Mar 23, 2011 09:09 AM
Menu under Header Image on Specific Page Cathy131 Page & Category Menu Bars 5 Mar 5, 2011 04:07 AM
[SOLVED] Page Menu on Header image dougfoot Page & Category Menu Bars 3 May 30, 2009 04:37 PM
How to put the page menu bar under the header image? manu Page & Category Menu Bars 1 Mar 9, 2009 08:39 AM

All times are GMT -6. The time now is 08:16 AM.

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