Boostrap badge, accent color, button

Question

Hi,

https://getbootstrap.com/docs/4.0/components/badge/

How can I add a bootstrap badge in the left menu for a list item? I would like to create a link called "Merch" with a little badge in the upper right hand corner of the menu item that says "Coming Soon" that doesn't go anywhere.

How do I change the accent color for the left header menu items?

How do I also change the button color to the "gotoTop" button in the bottom right hand corner when scrolling?

Lastly, I'm noticing that when I click the "Click here to stream" buttons on the webpage that before it opens the new window it will go to the top of the page first then open a new window which is strange. How can I resolve this? It appears this only happens on mobile and not desktop.

SemiColonWeb · Accepted Answer

Hello, Thanks for your Patience! 1. Consider using something like this: [ch pre] Merch Coming Soon [/ch pre] 2. Consider using Utility Classes on the Tag of the Menu Items: [ch pre] Merch [/ch pre] Utility Classes: https://getbootstrap.com/docs/5.2/utilities/colors/ . 3. Consider using the following code: [ch pre type="css"].gototop active gotoTop { background color: 000; }[/ch pre] You can also use Utility Classes: https://getbootstrap.com/docs/5.2/utilities/background/ . 4. Simply find and de…

cameron_20 · Answer

Hi,

Which file and line should I place the following code:

.gototop-active #gotoTop { background-color: #000; }

How can I change only the hover color of the left menu item and the current menu item that I click on?

.menu-item:hover > .menu-link,
.menu-item.current > .menu-link {
color: #1ABC9C;
}

Would I edit the above code in style.css on line 3648?

Semicolon Web · Answer

Hello,

We recommend adding all the Custom CSS Codes in the css/custom.css File and not edit the Core Files as once we release updates you will not lose your Customizations.

This is the code you need to add for changing the Color for Menu Links:
[ch_pre type="css"].menu-item:hover > .menu-link,
.menu-item.current > .menu-link {
color: #1ABC9C;
}[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.