Problem adding a CTA button to navigation bar

SOLVE
matt5
Member | Partner

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.

0 Upvotes
1 Accepted solution

Accepted Solutions
krishangtechn
Solution
Member

@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

View solution in original post

8 Replies 8
sharonlicari
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


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Upvotes
krishangtechn
Member

@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

matt5
Member | Partner

Thanks 🙂

 

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.

0 Upvotes
krishangtechn
Solution
Member

@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

View solution in original post

matt5
Member | Partner

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

 

Thanks

0 Upvotes
krishangtechn
Member

@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

0 Upvotes
matt5
Member | Partner

It worked. Thank you 🙂

0 Upvotes
krishangtechn
Member

@matt5 ,

 

Glad to hear that.

 

Could you mark this topic as a solution 

 

Regards,

Ramesh Gosiya

KrishangTechnolab

0 Upvotes