Recommendations for stacks or addons to add buttons in to the navigation menu bar?

Classic
1

Hi Im looking for recommendations for stacks or addons to add CTA buttons into the navigation menu bar? Either Foundry or Lunar.
Thanks
Lydia

1 Like
2

With Foundry you can use mega menu to add a cta button…

3

Thanks I’ll check it out.

4

Now that I see changing themes to Foundry is going to make a ton of work for me. Is there something that can work for Lunar?

5

Most traditional themes like Lunar are limited, you might have a look at content areas?
https://elixirgraphics.com/themes/lunar

What is the CTA you are looking to add? Is it a link?

It wouldn’t be a button, but if your CTA is a simple URL link you could use an offsite page and set the URL to the link.

6

Thank you. I want a button that links to an offsite appointment booking site. Kinda making it super easy for prospective clients to know what to do if they are ready to do so. The link I had in the menu didn’t seem obvious enough. Im thinking of the psychology behind how people read websites and SEO too. So I’m still on the hunt. I inquired about Clean Menu and it works within themes as long as you can get into the navigation bar enough to manipulate it. I can do a few things to the nav bar but Im not sure if I can override Lunar’s basic one. I would love to know if I can do that before I purchase it simply as a test.

7

You could try a stack that adds something to the page outside of the menu. For example, Glider or Corners or Action Menu. There’d be others but just an idea…

8

Thanks I’ll go look at those.

9

I don’t have lunar,

Clean Menu is pretty food, but I think you would have to be able to turn off navigation in Lunar. I don’t know if that’s an option.

You might be able to style the offsite link a bit different with some CSS if all you want to do is draw some attention to it. You will need to provide a URL if you wish some help.

10

Thank you Doug, I appreciate the help. The URL is https://imlistening.ca/
I am curious about the idea of styling the link and wonder what that could look like. Ideally I would love to keep the button looking like the others with a gradient but modify the nav bar colour to help it stand out so there’s consistency. At the moment the link is in the drop down of the “let’s connect” in the nav bar and is called “Book an appointment” but I may change that to “Let’s Talk” and be a separate menu item at the right side of the nav bar.
I’m imagining an eye roll… LOL
As far as Lunar goes, I don’t believe I can turn off the navigation but I can hide pages from showing up in the nav bar if I wish and I can edit colours and transparency.
Any help is welcome and appreciated.
Thanks again

11

I’m pretty sure we’ll be able to style it like the other buttons. Can you make the menu changes, so that the link you want styled is it’s own top-level nav item?

Are you thinking of something like this for the style?

32%20PM

12

Wow that’s incredible!! Thank you for this. It IS what I was thinking. I will go ahead and organize at my end and connect with you when I’m done.
Much appreciated!!
Brilliant!
Cheers

13

Hi Don, I’ve just uploaded the latest iteration of the site. I would appreciate you having a go at the button again. I’ve made a design change and the button will be the teal coloured one not the red. Plus do you have any idea why my video obscures the nav bar when you scroll down the page? I posted this question about the stacks forum but I figured - Hey you might know.
Thanks in advance for your help.
Lydia

14

As for the player stack going over the top of the nav. I don’t think player2 has a z-index setting in the controls. At least I couldn’t find one. It is being set to 1, so try this custom CSS:

#playerWrapper-player1 #media-player1 {
z-index: 0;
}

Same as this post?

15

Yes it’s the same post. Thank you - I just popped the code in the CSS for the page and the although the placeholder for the video goes underneath the nav Bar (as before) the actual video still overlaps. Love some more advice please.
Thanks
L

16

Try adding the !important to the z-index

#playerWrapper-player1 #media-player1 {
z-index: 0!important;
}
1 Like
17

AMAZing!! that did it.
Thanks for your help.
cheers
L

18

If you want the button look in the nav to match the button in the body try this:

nav#site-navigation > ul li:last-of-type {
    background-color: #14A0A0;
    background: -webkit-gradient(linear, left top, left bottom, from(#14A0A0), to(#0C6060));
    border: 1px solid #0C6060;
    padding: 0 16px;
    border-radius: 30px;
    color: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px;
    margin: 0 5px 0 15px;
}

The last item in the navigation will look like a button.

1 Like
19

WOW !! You Rock!! Thanks that’s perfect.
Much appreciated!!!
Lydia

20

Lydia, looks like Doug has you covered on both your issues. Other than the coloring, his button code is the same as what I used in my example.