Problem adding a CTA button to navigation bar

Develop, Build & Integrate CMS Development
1

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
Screenshot-2020-01-09-at-19.06.25.jpg1522×893 219 KB

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

Screenshot-2020-01-09-at-19.07.20.jpg
Screenshot-2020-01-09-at-19.07.20.jpg1547×840 201 KB

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.

2

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

3

@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

4

Thanks :slightly_smiling_face:

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.

5

@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

6

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

Thanks

7

@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

8

It worked. Thank you :slightly_smiling_face:

9

@matt5 ,

Glad to hear that.

Could you mark this topic as a solution

Regards,

Ramesh Gosiya

KrishangTechnolab