center logo in the middle of site navigation partial view

BEWD 90 posts 302 karma points

Apr 03, 2019 @ 19:00

Hi

I am building a website in Umbraco 8 and using Bootstrap 4, The design for the site has the main navigation across the top with the Business Logo in the middle (3 nav links to the left, 3 to the right of the logo)

I have the following HTML for the navigation which works fine if hard coded but I'm not sure how to code it in a partial view (eg, select the Home node and the first 2 descendants, then place the logo, then select the next 3 descendants - including and descendants of those main pages

 <nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark main-nav">
        <div class="navbar-collapse collapse nav-content order-2">
            <ul class="nav navbar-nav left">
                <li class="nav-item">
                    <a class="nav-link" href="~/Default.aspx">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="~/about.aspx">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="~/events.aspx">Events</a>
                </li>
            </ul>
        </div>
        <ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <div class="triangle" style="text-align:center;">
                        <img class="logo" src="~/images/Carps_logo.PNG" width="280" />
                        <div class="triangleImg">
                            <img src="~/images/triangle.png" />
                        </div>
                    </div>
                </a>
            </li>
            <button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </ul>
        <div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
            <ul class="ml-auto nav navbar-nav right">
                <li class="nav-item">
                    <a class="nav-link" href="#">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Menus
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">A La Carte Menu</a>
                        <a class="dropdown-item" href="#">
                            Dessert Menu
                        </a>
                        <a class="dropdown-item" href="#">Childrens Menu</a>
                        <a class="dropdown-item" href="#">Sunday Lunch Menu</a>
                        <a class="dropdown-item" href="#">Drinks</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="~/contact-us.aspx">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

Any advice on how I can code this would be grateful, I have done navigation partials before just not sure how to split it with the logo in the middle?

Thanks

Ben

Copy Link

Amir Khan 1287 posts 2744 karma points

Apr 03, 2019 @ 19:23

Hi Ben,

An easy route would be to put 2 multi-node treepickers (one for the left and one for the right) on your home node for each side of the nav and render those.

Hope this helps,

Amir

Copy Link

BEWD 90 posts 302 karma points

Apr 03, 2019 @ 20:13

Ahh, now that is an option worth looking into. Would it be easy enough to also automatically display any dependants of those nodes from the normal MNTP code?

Copy Link

Amir Khan 1287 posts 2744 karma points

Apr 03, 2019 @ 20:17

By dependents do you mean child nodes? If so you should be able to loop through them like with any other nav code, something like below.

@if(item.Children.Any()) {
            var childItems = item.Children.Where("Visible");
            <ul>
                @foreach(var childItem in childItems) {
                    <li><a href="@childItem.Url">@childItem.Name</a></li>   
                }
            </ul>
        }

Copy Link

BEWD 90 posts 302 karma points

Apr 04, 2019 @ 10:18

Great thanks Amir, it took a bit of playing around but I got it working

Copy Link

BEWD 90 posts 302 karma points

Apr 04, 2019 @ 13:27

It looked at first glance to be ok and it renders fine but when I click on a link i get the below error.

enter image description here

The code in the Partial view is as follows and then this is bought in on the MasterPage with @Html.Partial("leftHandNavigation") :

@inherits Umbraco.Web.Mvc.UmbracoViewPage
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web

@{ var selection = Model.Value<IEnumerable<IPublishedContent>>("leftHandNavigation").ToArray(); }

@if (selection.Length > 0)
{
    <ul class="nav navbar-nav right">
        @if (Model.Name == "Home")
        {
            <li class="nav-item active">
                <a class="nav-link" href="../default.aspx">Home</a>
            </li>
        }
        else
        {
            <li class="idol">
                <a href="~/default.aspx">Home</a>
            </li>
        }
        @foreach (var item in selection)
        {
            if (item.Children.Any())
            {
                var childItems = item.Children;
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">@item.Name</a>


                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    @foreach (var childItem in childItems)
                    {
                    <a class="dropdown-item" href="@childItem.Url">@childItem.Name</a>
                    }
                </div> 
                </li>
            }
            else
            {
                {
                    <li class="nav-item">
                        <a class="nav-link" href="@item.Url">@item.Name</a>
                    </li>
                }

            }
        }
    </ul>
}

Any ideas what the error is referring to?

thanks

Ben

Copy Link

is working on a reply...

Flag this post as spam?

Center logo in the middle of site navigation partial view