Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

How to Blend TopWrap into NavWrap

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi Paul,

Is it possible to blend the topwrap into the navwrap? I'm looking to overlay the wave in the topwrap into the menu area. I know there might be some other options but I'm unsure where or how to get started.

Screenshot_121615_114236_AM.jpg


I can do a screencast if further info is needed.

URL: us501.directrouter.com/~zrifxdje/index.php

Thanks,

Steve
  • Steve's Avatar
  • Steve
  • LIfetime Developer - Big Bamboo
  • 562 posts
  • 8 Thanks
  • Karma: 4
Last Edit: 8 years 4 months ago by Steve.
The administrator has disabled public write access.
Hi Steve - yes probably need some more detail on exactly what you want to achieve here. Let us know and we will help to point the way.
Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Thanks so much Anthony.

Here is a screencast showing their OLD/Current Website: screencast.com/t/Im4udcGRs7oh

They are hoping to have the same approach with the new. Their goal is to stay away from clean lines and the 'boxed' look.

Thanks again,

Steve
  • Steve's Avatar
  • Steve
  • LIfetime Developer - Big Bamboo
  • 562 posts
  • 8 Thanks
  • Karma: 4
The administrator has disabled public write access.
Hi Anthony,

I'm checking in to see if you need any more specifics?

Thanks,

Steve
  • Steve's Avatar
  • Steve
  • LIfetime Developer - Big Bamboo
  • 562 posts
  • 8 Thanks
  • Karma: 4
The administrator has disabled public write access.
Apologies for the delay Steve.

It's a wee bit complicated with the way you have it set up using the image as a bg image rather than an image pasted in the content via an img tag.

But this is how to get the topwrap to overlap the navwrap.

Add this to your custom.css file:

#topwrap {position:relative;z-index:2;margin-bottom:-10px,padding-bottom:30px}
#navwrap {position:relative;z-index:1}

You may need to change the px values to suit your desire but that gets it working for me here.
Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
The following user(s) said Thank You: Steve
Thank you so much Anthony! I was starting to play with the relative and the z-index tags but was not having any success. Again, thank you for helping me out on this. This is one of those cases that what I needed to do was well beyond my ability. The client definitely new what she wants and I was working outside my strengths.

There was one minor correction to the code if anyone else stumbles across this thread:

#topwrap {position:relative;z-index:2;margin-bottom:-10px;padding-bottom:30px}
I had to change the comma after the -10px to a semi-colon.

I'm headed to bed tired but finally looking forward to the next day.

Have a great Christmas/New Year's. I'm hoping not to bother you or Paul in the next week. (Fingers Crossed).

Steve
  • Steve's Avatar
  • Steve
  • LIfetime Developer - Big Bamboo
  • 562 posts
  • 8 Thanks
  • Karma: 4
The administrator has disabled public write access.
Awesome Steve - glad to hear it. Best of luck with the site.
Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers