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.

Patrick

(WP: 3.4.1 A: 3.7.7.)

I have not tested but perhaps taking %image out and then wrap %pages with a div with an ID and use CSS to add a background image and sizing. Just a thought. It might look something like...
You may also want to wrap the %pages in another div to position within the first.
Again I have not tested.

Imilesw,
My url is http://www.alphagraphicsorem.com/ I've been trying a bunch of different things for days to try and get my menu overlay my header image. I would also need to be able to move the menu slightly to the right. I don't know anything about CSS, and everything I have tried has not worked.

Using absolute positioning will probably be the way to go. I use Firebug to determine the CSS selector(s). Here is an example that will move the menu over the header that you could tweak to your liking.

wrap both the %image and %pages in the same div and use absolute positioning for the menu