Overlay slideshow with menu

[plumcreek]

Maybe there’s a clever work around for this, I’m all ears.

Client wants the “Shop Recipes About Us” menu on the home page to overlay the slideshow. http://bethtest.com/

Only on the home page, it’s fine everywhere else. (Damn NYC designers!)

Here’s what is desired:

 

How can I make that happen?

TIA for your help, as always.

[scrambler]

Adding the rules below to the theme Global Custom CSS Rule box should do it.

/* moving menu on slider on home page */
.home.is-desktop #header {position:absolute;}
.home.is-desktop .menu-primary .wvrx-menu-container {background:transparent;padding-top:50px;}
.home.is-desktop .menu-primary .wvrx-menu > li > a {background:transparent;color:white;font-size:130%;}

If not, post back with the rules in place

 

[plumcreek]

Have I told you lately how much I appreciate you? Because I do. I see I’ve been using this theme for almost 7 years and each time, every time I get stuck you have the answer for me. Thank you so very much.

[scrambler]

You are welcome, glad I can help.

If you want to reduce the space between the top banner and the slideshow, you can set the space between title and content to zero globally in the settings, or you can add the rule below to only do it on the home page

.entry-content {padding-top:0;}

[scrambler]

And to move the cart image to the top of the slideshow, add the part in yellow to your orange cart button html

<a href="/cart/">
<img src="http://bethtest.com/wp-content/uploads/2021/05/cart.jpg" style="margin-bottom: -6px;">
</a>

 

 

[plumcreek]

Ok, so now that you are reading my mind anyway…. LOL

How to move the Sign in and cart image all the way to the right, leaving the 10% off thing in the middle?

I really should learn CSS at some point. hee hee.

TIA!

[scrambler]

Right of the browser, or right of the slideshow?

[scrambler]

If right of the slideshow, Add the Rule below in the Advanced options > HTML Insertion area > Pre wrapper area CSS rule box.

If there is already a rule in there just add the properties inside the existing rule curly bracket with a semi colon separation.

{max-width: 1100px;margin: 0 auto;text-align: center;}

Then replace the HTML in that area box by

<span style="padding-left:150px;"> 10% OFF YOUR FIRST ORDER WITH CODE: MILKIT</span>
<span style="float:right;"><a href="/my-account/">Sign in</a> <a href="/cart/">
<img src="http://bethtest.com/wp-content/uploads/2021/05/cart.jpg" style="margin-bottom: -6px;">
</a></span>

 

[Weaver]

I’m sure this is still a work in progress, but note that if you leave the home page, you  can’t easily get back to it.

[plumcreek]

Yep. At this point I’m laying it out EXACTLY the way the high priced Manhattan ad team put it together. I get to show it off to the client tomorrow and then perhaps they will start believing me when I tell this this is something other than an ad campaign in a print magazine. LOL.

I’ll play more in the morning, time to go get some dinner.

If you can tell me two other things? Where is the Privacy Policy in the lower right corner coming from? I swear it’s driving me nuts.

Also, after the bottom section there those 3 menu options should be centered but it’s centering in the first column instead of as itself?

TIA!

[scrambler]

Dashboard > Settings > Privacy

I don’t know that we can remove it, @weaver may know more

Your footer widget area is set for two columns, so you need to set it for one only (where the menu is)

[plumcreek]

So weird, that corner Privacy Policy link. Thanks.

[plumcreek]

The top now looks like they wanted it, thank you!

How do I ask @weaver if they know how to remove the privacy or by you tagging them that would do it?

[scrambler]

He should have been notified and should comment at one point.

You can also check WordPress.org as this is a WordPress thing

[Weaver]

This reply has been accepted as the best answer.

The privacy thing is a core WP “feature” to help people comply with legal requirements. I believe it automatically creates a page called “Privacy Policy” when you install WP. I think if you delete that page, the info will go away. Otherwise, it is surrounded by an HTML wrapper with a class that you could create custom CSS to hide. This forum does not have a page called Privacy Policy, so it isn’t appearing in the footer.

[plumcreek]

How dumb is that? Yep, I removed the page and it removed the link. Thank you so much!

[Author]

Posts