Hello and good day, I use the "Navbar Centered" and always have the following problem, also with other Navbars. I try the following with the CSS:
Active link in the Navi, with other color.
I have tried several things but without success.
Look at the classes being used by the nav (all classes used by each part are always shown in the Styles window). Go through each part of the nav until you find the part that has the class that needs to be changed. That's the best way to be sure you have the right one. It's there, but sometimes it's not in the part of the nav that we "think" it is in. :)
Thank you Jo, of course you're right. Until now I was unfortunately unsuccessful. I will continue to try. ?
No problem, I go through the same thing when I have to edit one too. One of these days I'll get smart (maybe you will do so now lol) and write down the areas I need to edit for specific things in the nav. Some of it truly isn't intuitive so I know your pain and obviously I don't recall where the settings are so I couldn't tell you, only that it's best that you find it and then document it for yourself and don't follow in my footsteps hahahaha! :)
I gave it up for the moment. Already with different cms systems it was sometimes difficult, but I always found a possibility.
For a:hover, everything ok, but for a:link I can't find it even after a long search.
Otherwise I think the BS is very good. ✅
I just went in and added a Navigation Clean from the UI's included in the app. I clicked on the first link to make sure it was set to active. From there I looked at the classes in the Styles window and the very first one has the color for the Active in it. What you need to do us duplicate that class using the right little dots and then delete everything in the name of the class except for "nav-link.active" basically like this:
.nav-link.active {
background: green;
)
or whatever color you want it to be. Add any other attributes you need to this to style the active state. You can do the same for the Focus, Hover etc. adding those parts to the class properly of course.
Now since I don't have any idea what nav you're using it's hard for me to tell you what you need to find in your nav, but with this one that's where it is.
Would be nice if these things were settings in the app rather than having to edit the classes, but ... at least we can do it!
No offense meant here, but this took me all of less than 30 seconds to find so I would truly suggest you brush up on your CSS or on Bootstrap Studio more if you were unable to find that setting. My guess is you were expecting it to be a separate setting and it was combined with other states (focus, hover, etc) which makes it not quite as obvious, but if you know what you're looking for it's not that hard to find.
The main key is to:
- In the Overview Pane, click the item you want to change or find the settings for (sometime you may need to adjust this by clicking other parts until you find it).
- In the Styles window, watch to see where the colors or other attributes you're looking for show up. Keep in mind that the only styles that show there are the ones currently being used by the element you have highlighted or clicked on in the Overview Pane.
- Always duplicate the class so you don't lose the original, even if it's editable that's a good practice.
- Always duplicate to your custom CSS file so you always know where the ones that "you" created are located.
Hope that helps!
Thanks a lot Jo! Yes, that's exactly how I did it. But, the first link becomes active, if I click on the first link, the second link becomes active, and all other links never become active. That is the problem, it is a little bit chaos.
But thanks anyway.
Are you trying to set this up manually or are you using the feature of BSS for turning on the active status? BSS has that ability, but I'm unable to help further on that as I haven't really worked it it myself as of yet. You should use the built in function for it though, but it has to be a Bootstrap nav for that to work.
Yes, manually. No, it's not a boostrap navigation, it's the "Navbar Centered" navigation. Thanks
I just checked that in BSS, and if it's the one in the Online Components downloads, then you are in luck and the feature works for Smart Active State. You'll need to do a search to see how it works. There are posts on the forums here that explain it all. Just search for "Smart Active State" and you should find them. Be sure you turn off all active states that you have currently active on all pages. This feature was created so that we could use the Linked Component feature with our navs and still have active state work correctly since Linked Components are identical and we couldn't set up an active state system at all. So, check it out and see if you can get it to work.
If you didn't get it from one of the downloads within the Online Components listings in the app (in other words, if it's a custom code block) Well then .....
Then it depends on if you have your nav setup as a Linked Component. If you do, then you cannot set up the active class as it will always be the same on all pages. If you don't, then the thing you need to do is add the active class to the link for each page (you may already know how this works, but since I don't know that I'll give a brief on it.
Open each page one at a time. Deactivate any links that are active on the nav, then activate the link for that page. You activate/deactivate them with the top menu that shows up when you click elements that have text editing components in them. Once you do that then the correct link will have your background color or whatever attributes you give that class.
Thanks, Jo, Okay, I have all active links to all pages per:
Nav Item Options:
Disabled = No Active = No
Then the Navbar, on all pages:
Smart Active State = Yes
In the custom.css:
.nav-link.active { background-color: #44444444!important }
<hr />
It works !
Fantastic, many thanks Jo for your nice help.
I like Bootstrap Studio very much and until now I didn't have any problems with the navigation. The problems are not with BSS, but with me. ?
Since I don't speak English, I need more and more time, because I first have to translate the texts into French or German.
Have a nice day
Glad you got it worked out and you're doing pretty good with your translations for your language then too as I understood exactly what you wanted and sometimes that's not the case! Enjoy!