Hello, I am running Bootstrap studio 4.1.2 and working on my first small website. 3 Pages. Bootstrap 4 project. I am attempting to get the Smart Active State Navbar feature working. Here is where I am at.
On each page I have the NAVBAR's Smart Active State toggled on. NAV ITEM Active is toggled on only for the corresponding page.
The Problem: The corresponding pages NAV Link does not highlight.
Anyone have some ideas ?? Thanks
If you have specifically set the Active state on the links, you have to deactivate that Active state that you set on each link.
I just set this up on a new project using a linked Nav component on 2 additional pages.
Saj
What you are saying is not completely clear. When navbar is selected I toggle Smart Active State on. But each nav item Active Option is toggled off. As shown in the screenshots. Still not working.
Can you clarify because still not working.
Thanks
The first screen shot does not seem to apply to this statement "NAV ITEM Active is toggled on only for the corresponding page." Which is why I said what I said in the first place.
I just now started a new project and added Navbar Component, deactivated the first link, enabled the Smart Active State feature. Clicked the first link set the URL to index.html, click the second link set the URL to page2.html, click the third link set the URL to page3.html. Then in Design pane (bottom/right) right clicked index.html and selected duplicate then renamed to page2.html then duplcated a third page and renamed it to page3.html.
On page2/page3 I had to set the Smart Active State feature for their Navbars because this time I didn't do a linked Navbar between pages.
Leave your current project as is, and try what I just described in a new BS4 project. Maybe in doing so you might think of something you missed on your original project.
Saj
I'm curious about something Saj (haven't tried it yet). If you had all the settings correct on the index page, why would you need to reset them on the other pages? Shouldn't they have been exactly the same as the page they were duplicated from? Or am I missing something here?
I just tried it again and it seems that the Smart Active State did carry over. So it's possible that I didn't state my order of things I did to the "T" after I had done my testing. It's also possible that at that time it was flaky and didn't carry over, I can't been sure. Very likely I got my order slightly off though.
I just did it again and sure enough I forgot to set it before I duplicated the pages, undid twice then set it and reduplicated etc... and it carried over. At the very least it helps you to remember to check that each pages Navbar has it set.
Saj
Ahhh yes that makes total sense, and I've done it myself so no worries lol. At least now I know it does carry over which is a good thing. Thanks for clarifying it for me and others :)
I am confused as to why you were duplicating the pages with the initial navbar in page one. Is this not making just a copy of the navbar menu so then one would have to edit each pages menu anytime a style change is made.
I did my test using a linked navbar menu. I inserted the navbar and turned any active link off (First Item). Then I set the Smart Active State selector to on for the Navbar. Then I created two blank pages named page2.html and page3.html. I copied the Navbar from the index.html page and Paste Linked it into page2.html and page3.html. On preview the links become active after I click one. This seems to be a better method as one want to keep the menu linked to all pages. Although the active state does not occur on the first visit.
Yes it would be more efficient to use a Linked Navbar Component. It is what I did in my first post response. The responses after that where more of not knowing how @dstp created their Navbar, so it was more of a test pattern to follow to see if it works correctly for them. Then they could go back through their code to see if there was something missed. If they did the recreation test and it worked out, in the process of the recreation they might have thought of something they might have missed, like maybe if they didn't use a Linked Navbar Component, they'd need to make sure that the other pages needed to have Smart Active State enabled in case they didn't turn it on before creating duplicate pages. Or did they setup the nav page links correctly? Is there CSS that's overriding the highlighting etc...
I typically do a new project to test something when I'm trying to help someone, because that removes the possibility of me having CSS etc.. that could be hiding/blocking whatever it is from displaying/functioning right. That also helps in discovering if something is a bug as well.
Saj
Thanks Saj, I think I missed your first post. It does indeed explain the linked method. Also since the question indicates its only a three page site, it would seem to be more reasonable to use a copy of the navbar and then just set the active on each navlink.
There is another method using javascript that compares the url in the browser to any link on the page that matches the end of the stripped url result #home.html that works well if anyone is interested.
I would like to use smart active on my navbar but my link url, instead of /about.html, are /about/. With this my the smart active navbar doesn't do it's job. Can you make a field on the navbar link that chooses which page to go and another field to choose how the link url to the page would be like (for example, /about/)? Hope success to all you devs
I have been trying everything to get the Smart Active State to work and have failed miserably.
I have 31 pages with the Navbar linked. All references to the pages are without the .html at the end (contact instead of contact.html). I thought that without the .html at the end, that could be causing the problem so I added it to each page and still the Smart Active State does not do its job.
The only way I can get the links to show them being active is to unlink the Navbar in each page and do everything manually. This is a real pain for 31 pages.
Please help with very detailed instructions. This is driving me crazy and I have wasted a lot of hours and getting nowhere. Thanks for any help you can give me.