Jump to content
mtaus

Transparent Nav over Lax on Homepage

Recommended Posts

mtaus

I'm trying to build a homepage with a Lax image and a transparent navigation "hovering" over the lax image. To accomplish this I need to figure how to do 3 things:

  • How do I set MegaNav to be a transparent background?
  • How do I get it to appear inside (not above) the Lax Container?
  • How do I add the nav to all other pages, i.e, if I put nav it in the Header, it will appear twice on the homepage?

Thanks for any help!

Share this post


Link to post
Share on other sites
chrisayers

Number one and two are a little tricky. We would need to create a custom version of lax with a nav bar in the opt arrays. It is not all that hard. Aries or myself could probably knock a custom section in a couple of hours for you. As for number three on your list that is easy.

Put the extra nav bar up top on your home page but then hide it in the advanced section of the editor here.

image.thumb.png.5328f60cdee4295a439f213fffba5e9a.png

Share this post


Link to post
Share on other sites
chrisayers

Something like this........

relax.jpg

  • Like 1

Share this post


Link to post
Share on other sites
mtaus

@chrisayers thanks for the reply... I forgot I could hide sections. And I got the transparent MegaNav in the Lax section... Those were all pretty easy.

The only glitch now is that the Lax section is vertically centering its contents. So the menu won't stick to the top. You can see it action here: https://peakbotanics.com/. Note how the Nav is well below the top.

I've tried adding a CSS class to both the Lax and Meganav sections with the following but it's not working: 

.nav-top {vertical-align:top; -webkit-align-self: top; align-self: top;-webkit-align-items:top; align-items:top !important}

How do I get the Lax section to vertical align top?

 

 

Share this post


Link to post
Share on other sites
chrisayers

I am seeing your nav (on top) now.

peak.jpeg

IMG_4AA81A42A1B9-1.jpeg

Edited by chrisayers (see edit history)
  • Thanks 1

Share this post


Link to post
Share on other sites
Jason

@mtaus How did you achieve this?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×