add active class to men i actually dont know what im doing wrong - Using Umbraco and getting started

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 1287 posts 2744 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 1287 posts 2744 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 1287 posts 2744 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...

Flag this post as spam?

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