Active state navmenu color

Bootstrap Studio Help
1

Hi,

I just bought the program, and last couple of days I am using it intensively. I must admit that the program is very promising (although you have to write a lot of CSS code manually).

My first question: When I drag & drop the navbar (I am using Readable Theme), only the index.html page has the correct active state color in Navbar menu. The other (copied or duplicated) pages have the active state color inherited from the index.html which is not what it should be.

Please, any idea how to correct the problem on duplicated pages?

Yours sincerely, S.Popic

2

On the duplicated pages select the nav bar link and you should see an options bar along the top.

For the page you are in you need to select the active option to make that link the active link and then deactivate he page you duplicated.

3

Hi,

thank you very much for the reply. The procedure you described works!

Sincerely, S.Popic

4

No probs, glad to help ?

5

Hello, I'm having the same issue. But I linked the nav-bar on all pages. So when I set the active state on an individual page, this status applies for all pages, which I do not want. Is there any workaround?

Thanks, Enrico

6

You need to be using BS4 for this to work and a native menu from the main components if I'm not mistaken. If you have imported any other menu system it will not have the auto settings available as it would be more like a Custom Code block instead of a native default component.

7

Thanks for your answer. I'm using the latest version of BSS and I only used the native menu from the main components. I didn't import anything else so far (I'm still a beginner with BSS). I already found this script (Link to source):

   <script>
    $(".nav a").on("click", function(){
      $(".nav").find(".active").removeClass("active");
      $(this).parent().addClass("active");
    });
    </script>

But it didn't change anything.

8

I was just messing with it since I haven't really messed with the default menus and have been going to do it anyways since I want this feature as well. So ...

Be sure of one major thing. You need to drag in a "navbar" not a "nav" and that will give you the feature to turn on the active state setting. Then you have to edit your CSS to give it what you want for the active / hover states.

And as mentioned before, be sure you're set up in the Bootstrap 4 and not Bootstrap 3.3.7 as you do have a choice when you first make a project.

That's all I had to do so far to get it to work. Hope that helps.

P.S. I did notice that the "Navbar Clean" on the UI menu does not have this feature, just in case that's what you were trying. Hopefully that's a glitch and it should have that feature since it's part of the base UI components. Maybe Martin will let us know on that.

9

Thanks again for your reply. I'm using BSS 4 (also when creating a new design). And I'm also using the complete navbar:

enter image description here

I found out that it is related to the LINK function of BSS. It's not compatible when you link the navbar on several pages. This seems to be a bug. Maybe anyone from the BSS team can check on this?

Regards Enrico

10

Once you link the navbar on all pages you will not be able to change the "active" class on each pages navlink any longer because the html will be different for each page which then conflicts with the feature of "linking" a exact copy of the navbar..

You can use the new smart active state for the navbar and use linking to other pages however I am unable to determine how to add additional css styles to that feature. It seems to only change the font style. But it does work....

If you are making a simple menu that will not change and has a couple of links, copying the menu (not using linking) to each page and then changing the active class to each pages link is the best way to go because when the page loads it will load css first. You still will have to make changes to all the pages with the navbar when you change something though which is pretty much why I like to use the linking feature.

If you have a website with multiple menu links with submenus and is highly complex then you would want to use the linking to each page with the smart active state recently added by the devs.

There is another way to which requires some javascript to add styles to the navlink when the page loads. Basically you find the url in the browser after the page load and strip it down to the last part which is the page link and then use that piece of data to compare it to any navlinks that match on the page. When it finds that navlink it will add the class "active" to it and then your styles you set in css will apply.

11

Okay, I got it run with a linked nav and this js code:

$(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

Would be a nice feature for the next BSS update.

Thanks for your help!

12

I'll have to play with this some more. I think you guys are over thinking what it's supposed to do, but I'm not positive on that. The whole idea of them adding this new ability to set the active state, is in order to accommodate menus that are linked via the "paste linked" setup so you should "not" have to add anything at all to make it work. You should only have to set your CSS up so that it does what you want it to for the active state and nothing more.

I could be wrong here, but that's how I interpret it so I'm betting there's a lot we just don't know how to set up is all.

MARTIN!!! Please help us here if you would so we know how to use this new feature :)

13

Enricob: Yes thats basically the same code I use to acheive the result needed for linking and active styling. There is a slight delay though compared to css but it appears to be animation. (There is another addition to the code to make it work for both absolute and relative links though).

Jo: Yes, I would like to know more about the smart active state. When looking at this in my browser inspector when setting the smart active state is that it does not look like smart active state changes "active" class at all when switching pages. "active" stays put on the main index page. Something else is happening where the font is being changed or "darkened" to create the link active state. If I knew what that was I might be able to write more css style for it like change the background color etc.

14

Hmm, I guess I'm assuming the active state settings of the CSS are what are being applied, so I'm "assuming" lol, that we just edit the CSS active state (or create our own setups for it) so that it does what we want when it's active. What I don't know is how the "smart active state" works in function so I'm not sure what we're supposed to do to make it work so that the active page is set correctly. I'll wait on Martin or someone that knows exactly how this works to give us some more info since we don't have any tutorials on this yet that I'm aware of.

15

Well color me wrong but this does work as advertised. I created 3 pages and paste linked the navbar. Then turned on smart active state on the navbar . I deactivated all links. (They all have the class active on them which remains that way.) I then added this css to my styles.

.nav-link.active {

background-color:red;

color:rgba(0,0,0,0.9); }

Preview and it sets the background to red and changes to the proper link when changing pages. Very cool.....no jscript needed.

16

Thanks Twinstream! I knew it had to be something simple that we just didn't know lol. And I was pretty sure CSS was the only thing needed to be adjusted for the styling of the active. That helps a lot, most appreciated!

17

Hi guys, thanks for all your answers. I think I'm still doing something wrong. Its not working on my end. I have a linked navbar:

The navbar is the same on all pages, because its linked.

When I now select the "activate" status for one page, the status remains on all pages, it doesn't matter which page a load on the browser:

Any ideas?

Thanks, Enrico

18

Thats not the right setting. You need to set "Smart Active State" to On. If you select the navbar and go to options you will see the selector.

You also have to add the css styles you want to your stylesheet for .nav-link.active.

19

You also need to make sure you deactivate the first link or you will show two links active, not the current page.

20

I got it, thanks for your help. Its working now, without additional CSS or JS.

regards, Enrico