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 »

Extending the header image into the page menu bar

Old Aug 13, 2012, 11:19 AM
1 posts · Sep 2010
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 11:32 AM. Reason: Version #s
Old Aug 13, 2012, 03:20 PM
lmilesw's Avatar
10,176 posts · Jul 2009
Central New York State USA
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...
HTML Code:
<div id="banner-and-menu">%pages</div>
You may also want to wrap the %pages in another div to position within the first.
Again I have not tested.
~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.
Old Nov 16, 2012, 10:13 AM
4 posts · Oct 2012
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.
Old Nov 16, 2012, 02:35 PM
lmilesw's Avatar
10,176 posts · Jul 2009
Central New York State USA
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.
HTML Code:
#menu1 {
    position: absolute;
    top: 70px;
~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.
Old Nov 16, 2012, 02:36 PM
juggledad's Avatar
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
wrap both the %image and %pages in the same div and use absolute positioning for the menu
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support


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 06:35 PM
Extending the Header area past the website padding nilex Header configuration & styling 1 Mar 23, 2011 10:09 AM
Menu under Header Image on Specific Page Cathy131 Page & Category Menu Bars 5 Mar 5, 2011 05:07 AM
[SOLVED] Page Menu on Header image dougfoot Page & Category Menu Bars 3 May 30, 2009 05:37 PM
How to put the page menu bar under the header image? manu Page & Category Menu Bars 1 Mar 9, 2009 09:39 AM

All times are GMT -6. The time now is 11:36 AM.

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