How can I fix a dropdown menu bug on my blog page?

Firestone · ‎01-04-2023

Hi,

I am having a couple issues with my header/navigation menu on one of my pages. The dropdown menu on my blog page has a bug where it randomly the option when using the dropdown menu. This bug is only happening on this specific page: https://thecanvas.global/blogs/brands-interviews

I would also like to get ride of the "Home > Brand Conversation Series" from the top of the page, when I tried to get ride header with blog.title it did not do anything.

Thank you for your help!

SocialAutoPost · ‎01-05-2023

Remove that code from style.css.liquid and add the below code to your theme.liquid file after <head> tag

<style>
.breadcrumb a,
.breadcrumb span {
  display: none;
}
</style>

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular

View solution in original post

SocialAutoPost · ‎01-04-2023

Hello @Firestone,

Welcome to Shopify Community! Happy 2023 🙂

To remove both the "Home" link and the "Brand Conversation Series" text from the navigation breadcrumb, you can use the display: none CSS property to hide both elements. You can do this by adding the following code to your stylesheet:

.breadcrumb a,
.breadcrumb span {
  display: none;
}

This will target the last span element within the breadcrumb element, which should be the one containing the "Brand Conversation Series" text, and hide it.

I hope this helps! Let me know if you have any other questions or if you need further assistance.

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular

Firestone · ‎01-05-2023

Unfortunately that did not change anything, but thank you for the quick response.

SocialAutoPost · ‎01-05-2023

I just wanted to check if you were able to add the CSS that I sent earlier. Could you please confirm which file the CSS was added to?

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular

Firestone · ‎01-05-2023

I added it to the style.css.liquid file and it did not change anything. Is there somewhere else I should put it?

SocialAutoPost · ‎01-05-2023

Remove that code from style.css.liquid and add the below code to your theme.liquid file after <head> tag

<style>
.breadcrumb a,
.breadcrumb span {
  display: none;
}
</style>

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular

Firestone · ‎01-09-2023

This worked, thank you very much!

Any chance you know how to fix the other issue on this page where the elements of the navigation menu get highlighted randomly when you hover over them?

Cedcommerce · ‎01-05-2023

Hello @Firestone,

This issue might be occurring because of a CSS code that is overlapping on the blog page.

Please remove the below provided CSS code to fix the same.

.header-section-overlap:not(.nav-opaque) {

padding-top: 0 !important;

}

Hope this works, let us know if you need any further help.

Regards,

CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

How can I fix a dropdown menu bug on my blog page?

How can I fix a dropdown menu bug on my blog page?

Community Blog Articles