ByteEditor Website Builder

Wiki menu

Header Customization

By following the steps in this instruction, you will be able to create your custom header. You can use the code snippets provided in the guide to recreate this header, or you can modify the steps to tailor the header to your specific needs.
Header Option 4

Step 1. Create the header view

  1. Open the project folder
  2. Open the “Views” → “Partials” folder. It already contains the built-in headers (“header1.cshtml”–“header3.cshtml”) and their shared markup (“headerShared.cshtml”).
  3. Create a file named “header4.cshtml”
  4. Copy the following code and paste it into the file
@using PageBuilder.Core.Controllers
@using Umbraco.Cms.Core.Models
@using Umbraco.Cms.Core.Models.Blocks
@using Umbraco.Cms.Core.Security
@using Umbraco.Cms.Web.Common
@inject UmbracoHelper _umbracoHelper
@inject IMemberManager _memberManager
@{
    IPublishedContent? assignedContentItem;
    try
    {
        assignedContentItem = _umbracoHelper.AssignedContentItem;
    }
    catch
    {
        assignedContentItem = null;
    }
    var design = ViewData["Design"] as Design;
    var settings = ViewData["Settings"] as Settings;
    var customCssClasses = settings?.Header?.FirstOrDefault(e => e.Content.ContentType.Alias == "headerBlock")
                            ?.Content.Value<string>("customCssClasses") ?? string.Empty;
}
<nav class="header @(design?.ShowHeaderOnScroll == true ? "sticky-top" : "") @customCssClasses">
    <div class="container d-lg-block">
        <a class="navbar-brand d-lg-table mx-lg-auto @(design?.LogoHover != null ? "has-logo-hover" : "")" href="/">
            @await Html.PartialAsync("logo", new ViewDataDictionary(ViewData) { { "imageCropAnchor", ImageCropAnchor.Left } })
        </a>
        <hr class="opacity-100 border-top d-none d-lg-block" style="--bs-border-color: var(--bs-navbar-color);">
        <div class="main-nav flex-grow-1">
            <div class="nav-inner justify-content-lg-between">
                <ul class="main-menu me-lg-auto mb-lg-0">
                    @{
                        var menuItems = settings?.Header?.FirstOrDefault(e => e.Content.ContentType.Alias == "headerBlock")
                        ?.Content.Value<BlockListModel>("headerLinks")?.Select(x => x.Content)
                        ?? Enumerable.Empty<IPublishedElement>();

                        foreach (var item in menuItems)
                        {
                            if (item is HeaderLinksGroup headerLinksGroup)
                            {
                                if (headerLinksGroup?.DropdownLinks?.Any() ?? false)
                                {
                                    <li class="dropdown">
                                        <a class="menu-link" @Html.Raw(assignedContentItem?.Url() == headerLinksGroup?.MainLink?.Url ? "aria-current=\"page\"" : string.Empty) href="@headerLinksGroup?.MainLink?.Url" target="@headerLinksGroup?.MainLink?.Target">
                                            @{
                                                RenderLinkContent(headerLinksGroup?.MainLink);
                                            }
                                            <span class="d-inline-flex toggle-icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                                                    <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708" />
                                                </svg>
                                            </span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            @foreach (var dropdownItem in headerLinksGroup?.DropdownLinks ?? Enumerable.Empty<Link>())
                                            {
                                                <li>
                                                    <a class="dropdown-item" @Html.Raw(assignedContentItem?.Url() == dropdownItem?.Url ? "aria-current=\"page\"" : string.Empty) href="@dropdownItem?.Url" target="@dropdownItem?.Target">
                                                        @{
                                                            RenderLinkContent(dropdownItem);
                                                        }
                                                    </a>
                                                </li>
                                            }
                                        </ul>
                                    </li>
                                }
                                else
                                {
                                    <li>
                                        <a class="menu-link" @Html.Raw(assignedContentItem?.Url() == headerLinksGroup?.MainLink?.Url ? "aria-current=\"page\"" : string.Empty) href="@headerLinksGroup?.MainLink?.Url" target="@headerLinksGroup?.MainLink?.Target">
                                            @{
                                                RenderLinkContent(headerLinksGroup?.MainLink);
                                            }
                                        </a>
                                    </li>
                                }
                            }
                            else if (item is HeaderMemberLinksGroup headerMemberLinksGroup)
                            {
                                if (_memberManager.IsLoggedIn())
                                {
                                    <li class="dropdown">
                                        <a class="menu-link" @Html.Raw(assignedContentItem?.Url() == headerMemberLinksGroup?.SignedInMainLink?.Url ? "aria-current=\"page\"" : string.Empty) href="@headerMemberLinksGroup?.SignedInMainLink?.Url" target="@headerMemberLinksGroup?.SignedInMainLink?.Target">
                                            @{
                                                RenderLinkContent(headerMemberLinksGroup?.SignedInMainLink);
                                            }
                                            <span class="d-inline-flex toggle-icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                                                    <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708" />
                                                </svg>
                                            </span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            @if (headerMemberLinksGroup?.SignedInDropdownLinks?.Any() ?? false)
                                            {
                                                foreach (var dropdownItem in headerMemberLinksGroup.SignedInDropdownLinks)
                                                {
                                                    <li>
                                                        <a class="dropdown-item" @Html.Raw(assignedContentItem?.Url() == dropdownItem?.Url ? "aria-current=\"page\"" : string.Empty) href="@dropdownItem?.Url" target="@dropdownItem?.Target">
                                                            @{
                                                                RenderLinkContent(dropdownItem);
                                                            }
                                                        </a>
                                                    </li>
                                                }
                                            }
                                            <li>
                                                @using (Html.BeginUmbracoForm<FormsDataController>(nameof(FormsDataController.SignOut)))
                                                {
                                                    <button type="submit" class="dropdown-item">
                                                        Sign Out
                                                    </button>
                                                }
                                            </li>
                                        </ul>
                                    </li>
                                }
                                else
                                {
                                    if (headerMemberLinksGroup?.SignedOutDropdownLinks?.Any() ?? false)
                                    {
                                        <li class="dropdown">
                                            <a class="menu-link" @Html.Raw(assignedContentItem?.Url() == headerMemberLinksGroup?.SignedOutMainLink?.Url ? "aria-current=\"page\"" : string.Empty) href="@headerMemberLinksGroup?.SignedOutMainLink?.Url" target="@headerMemberLinksGroup?.SignedOutMainLink?.Target">
                                                @{
                                                    RenderLinkContent(headerMemberLinksGroup?.SignedOutMainLink);
                                                }
                                                <span class="d-inline-flex toggle-icon">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                                                        <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708" />
                                                    </svg>
                                                </span>
                                            </a>
                                            <ul class="dropdown-menu">
                                                @foreach (var dropdownItem in headerMemberLinksGroup?.SignedOutDropdownLinks ?? Enumerable.Empty<Link>())
                                                {
                                                    <li>
                                                        <a class="dropdown-item" @Html.Raw(assignedContentItem?.Url() == dropdownItem?.Url ? "aria-current=\"page\"" : string.Empty) href="@dropdownItem?.Url" target="@dropdownItem?.Target">
                                                            @{
                                                                RenderLinkContent(dropdownItem);
                                                            }
                                                        </a>
                                                    </li>
                                                }
                                            </ul>
                                        </li>
                                    }
                                    else
                                    {
                                        <li>
                                            <a class="menu-link" @Html.Raw(assignedContentItem?.Url() == headerMemberLinksGroup?.SignedOutMainLink?.Url ? "aria-current=\"page\"" : string.Empty) href="@headerMemberLinksGroup?.SignedOutMainLink?.Url" target="@headerMemberLinksGroup?.SignedOutMainLink?.Target">
                                                @{
                                                    RenderLinkContent(headerMemberLinksGroup?.SignedOutMainLink);
                                                }
                                            </a>
                                        </li>
                                    }
                                }
                            }
                        }
                    }
                </ul>
                @{
                    var headerButtons = settings?.Header?.FirstOrDefault(e => e.Content.ContentType.Alias == "headerBlock")
                    ?.Content.Value<BlockListModel>("headerButtons")?.Select(x => x.Content).OfType<HeaderButtonBlock>()
                    ?? Enumerable.Empty<HeaderButtonBlock>();
                    RenderHeaderButtons(headerButtons);
                }
            </div>
        </div>
        <a href="#" class="open-menu">
            <span></span>
            <span></span>
            <span></span>
            <span class="sr-only">Open Mobile Nav</span>
        </a>
    </div>
</nav>
@functions {
    private void RenderLinkContent(Link? link)
    {
        <span class="d-inline-flex gap-2 align-items-center">
            @link?.Name
            @if (link?.Target == "_blank")
            {
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" />
                    <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" />
                </svg>
            }
        </span>
    }
    private void RenderHeaderButtons(IEnumerable<HeaderButtonBlock> headerButtons)
    {
        foreach (var button in headerButtons)
        {
            <a class="btn btn-primary mt-2 mt-lg-0 ms-lg-3 @(button.Size == "Large" ? "btn-lg" : button.Size == "Small" ? "btn-sm" : "")" href="@button?.Link?.Url" target="@button?.Link?.Target">@button?.Link?.Name</a>
        }
    }
}

5. Save the file and rebuild the project. Umbraco 17 compiles views when the project is built, so a header view saved without a rebuild has no effect.

Screenshot At Nov 13 06 42 59

Step 2. Add the header to the Header Options list

  1. Open “Settings” → “Data Types” → “Design - Header Options - Dropdown” (in the “ByteEditor” folder).
  2. Add a new option “header4”. The option must match the file name of the view, without “.cshtml”.
  3. Click “Save”.

Step 3. Select the header in your design

  1. Open “Content” → “Design Builder” and open the design your site uses.
  2. In “Header Options”, select “header4”.
  3. Click “Save and publish”, then open your site.

💡 The header's colours come from the “Header” colours of your design in the Design Builder, so the new header follows the theme without any extra CSS.

💡 In the back office, the Header block preview (Settings → Header) shows one of the built-in layouts: a custom header is only rendered on the website itself.

💡 Upgrading from version 4? The “ByteEditor:CustomHeaders” section in “appsettings.json” and the AngularJS “.html” header view are no longer used in version 17. You can remove them.

Previous
Next
Built with ByteEditor