Hello guys, having an issue making the links / dropdown in my navbar change text color to white on hover/focus. Have messed around with the css with no luck. Any help would be greatly appreciated. For reference try hovering over ‘Services’ or ‘About Us’ on this site: www.vital-staffing.com
Well your navigation link is using inline styling. The first thing you need to do is get rid of the inline styling, and then write custom CSS to change the color rule on the .nav-link class. For example,
.nav-link {
color: white;
}
.nav-link:hover {
color: red;
}
This would cause the standard Bootstrap navigation link text color to change from white to red when you hovered over it. If you wanted the change to be a bit slower and smoother, you could add the rule transition: color .3s; to both classes.
Because you’re using a template, the actual CSS you’re looking for is .header-blue .navbar-nav .nav-link
You need to be familiar with how to write custom CSS, and how the hover pseudo class works if you want to be able to change the color of things when you hover your mouse over them. In general, understanding CSS is kind of required if you want to do anything outside of using standard components and templates in Bootstrap Studio. You can do a lot via the visual UI, but you also need to understand how to make the changes go into your custom CSS file, and not be applied as inline styles. Unfortunately, the program’s default behavior is to add changes made through the U.I. as inline styles. To build your website correctly, you have to choose the CSS class where you want your new styling rules to be written before you make the actual changes through visual U.I.
Although it is drag and drop, and uses visual tools to style the components, Bootstrap Studio is not the most straightforward program for people who do not understand coding, and how HTML and CSS work to generate a web page.
I would recommend you watch the Bootstrap Studio tutorial videos, and also read the written tutorials, and if you do not understand how to write CSS, you should probably take an online class, or at the very least do the CSS tutorials at W3 Schools.
1 Like
Thanks for the well structured response. Definitively a learning process. Bootstrap studio has really given me the freedom to focus more on developing server rules in Django and focus less on the UI. However, I see the value in going a bit deeper into the boostrap studio process with css.