Adding a second CTA to top nav

[ambershafer]

I need to add a second CTA button to the top nav of our site, but as you can see, it's not displaying correctly.

Current page with the existing template:
https://blog-stg.phenixrts.com/

Test page with cloned copy of template to safely experiment. 🙂

https://marketing.phenixrts.com/amber-test-header

Password is Amber Test !!

I would like for it to look like this:

I should also mention that this a custom theme created by a Hubspot developer, and my experience with web development, particularly CSS, is extremely limited and circa 1999. 🙂

Can you please help me figure out what I'm doing wrong?

[Stephanie-OG · Accepted solution]

Hi @ambershafer - like Jaycee said, I think you'll need a developer to get everything working smoothly, but just moving your secondary button HTML to inside the menu list already moves it up to where you want, you'll want to test that it's responsive and all that though. 

Here's the code you have now:

And here's what it looks like if you just take that <div class="header-btn-secondary">...</div> and paste it at the end of the <ul role="menu">...</ul>:

I see your developer used a default HubSpot menu module for that menu list and then inserted the button using JavaScript, so you'll need to do it that way too.

In your main.js file they have the following snippet: 

$(".header-btn").detach().appendTo(".cm-header .hs-menu-wrapper>ul")

And then I assume the button's HTML is where you have yours, so it's possible adding a second line with the other button like this would work: 

$(".header-btn-secondary").detach().appendTo(".cm-header .hs-menu-wrapper>ul")

[Stephanie-OG · Accepted solution]

Hi @ambershafer - like Jaycee said, I think you'll need a developer to get everything working smoothly, but just moving your secondary button HTML to inside the menu list already moves it up to where you want, you'll want to test that it's responsive and all that though. 

Here's the code you have now:

And here's what it looks like if you just take that <div class="header-btn-secondary">...</div> and paste it at the end of the <ul role="menu">...</ul>:

I see your developer used a default HubSpot menu module for that menu list and then inserted the button using JavaScript, so you'll need to do it that way too.

In your main.js file they have the following snippet: 

$(".header-btn").detach().appendTo(".cm-header .hs-menu-wrapper>ul")

And then I assume the button's HTML is where you have yours, so it's possible adding a second line with the other button like this would work: 

$(".header-btn-secondary").detach().appendTo(".cm-header .hs-menu-wrapper>ul")

[ambershafer]

This fixed it -- yay!

Although, when I tested its responsiveness, I realized that the nav doesnt work right on mobile.  It's like that on other pages with the original template as well (before my edits).

It looks like this 

Any hints on keywords I should search to troubleshoot?

[Stephanie-OG · Accepted solution]

I'm glad to hear that!

The overlap is a z-index issue. Something like: 

.mobile-menu {
  z-index: 1000;
}

should do the trick.

[ambershafer]

Awesome -- thank you so much!!

[Jaycee_Lewis]

Hi, @ambershafer 👋 Welcome to our community!

Let's ask some of our community members how they'd approach this project — hey @Kevin-C @MFischer @Stephanie-OG, do you have any suggestions for @ambershafer? Please note that even with some all-star advice from our community members, you may need to partner with a developer to get this working like you want.

Have fun building! — Jaycee