add active class to men i actually dont know what im doing wrong

mikkel 143 posts 365 karma points

Jun 19, 2020 @ 19:20

add active class to men, I actually don't know what I'm doing wrong

Hi every one. I actually don't know what I'm doing wrong, but I want to add class active to my menu and nothing works. I've tried with razor, javascript, jqyery. here is what i have tried. What am I doing wrong and why will it not work. :D

@foreach (var item in selection)

{

//string cssClass = @item.Id != CurrentPage.Id ? "" : "active";

// @Umbraco.If(item.IsAncestorOrSelf(Model.Content), "active", null)

// string cssClass = @item.Id != CurrentPage.Id ? "" : "active";

// if (item.Children.Where("TemplateId != 0 && Visible").Count() > 0)

// if (item.Name == Model.Content.Name, "active")

//<li class="nav-item @(item.IsAncestorOrSelf(Model.Content) ? "active")">

//var root = Model.Content.AncestorOrSelf(1);

//var active = "";

//if (item.Id != Model.Content.Id) { active = "active"; }

//if (item.Id == Model.Content.Siblings(1).Id)

//{

//}

<li class="@(item.IsAncestorOrSelf(Model.Content) ? "active" : null)">

<a class="nav-link smooth-scroll " href="@item.Url">@item.Name</a>

</li>

}

Copy Link

Amir Khan 1289 posts 2746 karma points

Jun 19, 2020 @ 19:34

What you have should work but are you by chance using dynamics? You'd do this in that case: class="@(item.IsAncestorOrSelf(CurrentPage) ? "active" : null)"

Copy Link

mikkel 143 posts 365 karma points

Jun 19, 2020 @ 20:38

no I don't think I do, how do I do it using dynamic ?. :)

Copy Link

Amir Khan 1289 posts 2746 karma points

Jun 19, 2020 @ 20:39

Like this, but you don't want to do that: @{ var selection = @CurrentPage.AncestorOrSelf(1).Children.Where("Visible"); }

Any chance its a front end thing like the class being applied to an element you're not expecting?

Copy Link

mikkel 143 posts 365 karma points

Jun 19, 2020 @ 20:43

not what I can see. it's a very ordinary bootstrap 4 menu, so there should be anythinh :)

Copy Link

Amir Khan 1289 posts 2746 karma points

Jun 19, 2020 @ 20:43

What's the HTML that's being rendered?

Copy Link

mikkel 143 posts 365 karma points

Jun 20, 2020 @ 07:52

now i got it to work on my 3 last menu bu not on the first 2. i really dont now what is wrong in my code. i use this code here to set the class active

string cssClass = @item.Id != CurrentPage.Id ? "" : "active";

   <li class="nav-item">
       <a class="nav-link smooth-scroll @cssClass" href="@item.Url">@item.Name</a>
   </li>

enter image description here

Copy Link

mikkel 143 posts 365 karma points

Jun 19, 2020 @ 20:48

this i my meny

 <!-- Navbar -->
            <nav class="primary-menu navbar navbar-expand-lg navbar-text-light navbar-line-under-text bg-transparent border-bottom-0">
                <div class="container">
                    <!-- Logo -->
                    <a class="logo ml-3 ml-md-0" href="/" title="Mikkel Pohjola">@Umbraco.Field("creatorName")</a>
                    <!-- Logo End -->
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-nav"><span></span><span></span><span></span></button>
                    <div id="header-nav" class="collapse navbar-collapse justify-content-end">
                        <ul class="navbar-nav" id="nav-active">





                            @foreach (var item in selection)
                            {
                                //string cssClass = @item.Id != CurrentPage.Id ? "" : "active";
                                // @Umbraco.If(item.IsAncestorOrSelf(Model.Content), "active", null)
                                // string cssClass = @item.Id != CurrentPage.Id ? "" : "active";
                                // if (item.Children.Where("TemplateId != 0 && Visible").Count() > 0)
                                // if (item.Name == Model.Content.Name, "active")
                                //<li class="nav-item @(item.IsAncestorOrSelf(Model.Content) ? "active")">
                                //var root = Model.Content.AncestorOrSelf(1);

                                //var active = "";

                                //if (item.Id != Model.Content.Id) { active = "active"; }

                                //if (item.Id == Model.Content.Siblings(1).Id)
                                //{

                                //}


                                <li class="@(item.IsAncestorOrSelf(Model.Content) ? "active" : null)">
                                    <a class="nav-link smooth-scroll " href="@item.Url">@item.Name</a>
                                </li>
                            }
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- Navbar End -->

enter image description here

Copy Link

mikkel 143 posts 365 karma points

Jun 19, 2020 @ 20:57

ahh it does some how work, but it dont show anything, it have to make bottom line under each menu when it is active i will try to se the css maybe that will fix it :D

Copy Link

Richard Hamilton 36 posts 158 karma points

Jun 20, 2020 @ 10:37

Have you fixed this yet

Copy Link

mikkel 143 posts 365 karma points

Jun 20, 2020 @ 12:09

not yet, but I've made it work on the last 3 navbars, but for some reason it won't work on the first 2

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

add active class to men, I actually don't know what I'm doing wrong