Extend stretch Top header Menu/Navigation and search bar

[jdmkuruma]

Hi All,

I would like to know on how to stretch the top menu header and navigation bar?

My site now:



Want to extend the top bars (Photoshop)



site: www.kidsamor.com
Thanks All!!

[jdmkuruma]

Someone please help :)

[stevesh]

Screenshots don't help, and you have some sort of redirect going on that prevents us from viewing the actual site.

[jdmkuruma]

Thanks Steve!
I have removed the forwarding, so hope this works now.
www.kidsamor.com

[jdmkuruma]

Someone please help :)

[jdmkuruma]

So this is the closest I have come to:

What I did was:
remove the code in #mainwrapper
.topmenu width set to 100%, and remove "no-repeat scroll left center". I manged to get the topmenu bar stretched all the way left and right.

Now the problem:
how to position the home, shopping cart, login, company logo..etc to position at its original position?
how to make the background show up on both sides of my main content? It only appears on the footer and below section.

Thanks!
web: kidsamor.com

[keneso]

why don't you just edit the background image adding the white, and blu-green striper above your cloud background image?
It appears you keep the nav menu, and logo etc. all within the mainwrapper, and all you want is to stretch the white, and blu-green, removing the clouds.
You can make it 200-300 wide for the clouds to repeat fine.

Background image:

white
white
white
white height 128 px
blu-green height 32 px
clouds
clouds
clouds
clouds
clouds
clouds
clouds
clouds
clouds
clouds

[jdmkuruma]

why don't you just edit the background image adding the white, and blu-green striper above your cloud background image?
It appears you keep the nav menu, and logo etc. all within the mainwrapper, and all you want is to stretch the white, and blu-green, removing the clouds.
You can make it 200-300 wide for the clouds to repeat fine.

Background image:

white
white
white
white height 128 px
blu-green height 32 px
clouds
clouds
clouds
clouds
clouds
clouds
clouds
clouds
clouds
clouds

That's exactly what I want to do...but I don't know how to code it on .css.

[keneso]

Yes it is clear what you want, I suggested you don't need to code it in css to achieve it, at least not the way you intend.
All you need is to change the body background image in your css file.

Instead of the image you have use an image like this, all you have to do is to stretch it longer with the clouds part, maybe up to 1500px

Then in your stylesheet.css file change body background (line 71) to the correct image name.

[jdmkuruma]

Yes it is clear what you want, I suggested you don't need to code it in css to achieve it, at least not the way you intend.
All you need is to change the body background image in your css file.

Instead of the image you have use an image like this, all you have to do is to stretch it longer with the clouds part, maybe up to 1500px

Then in your stylesheet.css file change body background (line 71) to the correct image name.

Thank You so much!!! I got it!! I am so happy now. Thanks again!!