Problem adding a CTA button to navigation bar

SOLVE
Highlighted
New Contributor

I've added a CTA button to the navigation bar on my blog, but as you can see in the screenshot below it has aligned itself to the top left of the navigation bar, overlapping the logo. I need this button to be positioned where it will replace the 'register' link that's currently on the far right of the menu.

 

Screenshot-2020-01-09-at-19.06.25.jpg

 

Below shows how I added the CTA button to the navigation bar.

 

Screenshot-2020-01-09-at-19.07.20.jpg

 

What am I doing wrong? I should mention that this custom blog theme was created by a Hubspot developer, and my experience with web development, particularly CSS, is very limited.

 

Thanks.

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Regular Contributor

@matt5,

 

Thanks for sharing the URL

 

Here you have to apply below stylesheet in your combined-css-ffaac00b86d8795a0ef19d7aac14d389.css file

.custom-menu-primary .hs-menu-wrapper ul li:last-child a {
background: #ed317d!important;
color: #fff;
padding: 6px 15px;
border-radius: 5px;
}

.custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children li:last-child a {background: transparent !important;border-radius: 0;color: #ed317d;}

Feel free to ask still if have any query confusion will be happy to help you

If you like the solution then kindly mark as solutions with an upvote.

 

Thanks & Regards,

Ramesh Gosiya

Krishangtechnolab

8 Replies 8
Community Manager

Hey @matt5    

 

Thank you for the information provided, could you please send the URL?

 

I will tag a few of our experts to learn from them.   

 

Hey @DanielSanchez  @krishangtechn @tjoyce could you please share your knowledge with @matt5

 

Thank you & Happy Friday

Sharon

Reply
0 Upvotes
Regular Contributor

@sharonlicari ,

Happy to help you to @matt5 

@matt5  could you please share the page url so I can check and assist you. Seems on existing live site https://www.datascience.salon/ is already there register button cta on right side.

waiting for more details

 

Thanks,

Ramesh Gosiya

Krishangtechnolab

New Contributor

Thanks Smiley Happy

 

This is the blog url where I need the CTA button to replace the 'register' link: https://roundtable.datascience.salon/

 

This is the main website where we already have the button (not a hubspot CTA) https://www.datascience.salon/

 

I would like the button in the hubspot navigation bar to match the one on the main website as closely as possible.

Reply
0 Upvotes
Regular Contributor

@matt5,

 

Thanks for sharing the URL

 

Here you have to apply below stylesheet in your combined-css-ffaac00b86d8795a0ef19d7aac14d389.css file

.custom-menu-primary .hs-menu-wrapper ul li:last-child a {
background: #ed317d!important;
color: #fff;
padding: 6px 15px;
border-radius: 5px;
}

.custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children li:last-child a {background: transparent !important;border-radius: 0;color: #ed317d;}

Feel free to ask still if have any query confusion will be happy to help you

If you like the solution then kindly mark as solutions with an upvote.

 

Thanks & Regards,

Ramesh Gosiya

Krishangtechnolab

New Contributor

Can you tell me where I can find the stylesheet where I should apply this css.

 

Thanks

Reply
0 Upvotes
Regular Contributor

@matt5 ,

 

Css file name is : combined-css-ffaac00b86d8795a0ef19d7aac14d389.css file

 

If  you find problem in path can you give hubspot access in private chat I'll update in tommorow

 

Thanks

Ramesh

Krishangtechnolab

Reply
0 Upvotes
New Contributor

It worked. Thank you Smiley Happy

Reply
0 Upvotes
Regular Contributor

@matt5 ,

 

Glad to hear that.

 

Could you mark this topic as a solution 

 

Regards,

Ramesh Gosiya

KrishangTechnolab

Reply
0 Upvotes