Hi @matthu ,
Could you try the below suggestion
In portal management
1. Under Content > Web Templates > Header > Add the following code
{% assign defaultlang = settings['LanguageLocale/Code'] | default: 'en-us' %}
{% assign homeurl = website.adx_partialurl %}
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Montserrat|Raleway|Nunito' rel='stylesheet'>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="skip-to-content"><a href="#mainContent">{{ resx.Skip_To_Content | default: "Skip to main content" }}</a></div><div class="container">
<div class="navbar-header">
<!--div class="visible-xs-block">
{% editable snippets 'Mobile Header' type: 'html' %}
</div-->
<div class="visible-sm-block visible-md-block visible-lg-block visible-xs-block navbar-brand">
{% editable snippets 'Mobile Header' type: 'html' %}
</div>
<button type="button" class="navbar-toggle collapsed" title="{{ snippets["Header/Toggle Navigation"] | default: resx['Toggle_Navigation'] | h }}" data-toggle="collapse" data-target="#navbar" aria-expanded="false" onclick="setHeight();">
<span class="sr-only">{{ snippets["Header/Toggle Navigation"] | default: resx['Toggle_Navigation'] | h }}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
{% assign primary_nav = weblinks["Default"] %}
{% if primary_nav %}
<nav aria-label="{{ resx.Main_Navigation | default: "Main Navigation" }}" class="navbar-right menu-bar {% if primary_nav.editable %}xrm-entity xrm-editable-adx_weblinkset{% endif %}" data-weblinks-maxdepth="2">
<ul class="nav navbar-nav weblinks">
{% for link in primary_nav.weblinks %}
{% unless forloop.first %}
<li class="divider-vertical" aria-hidden="true"></li>
{% endunless %}
{% if link.display_page_child_links %}
{% if link.url != null %}
{% assign sublinks = sitemap[link.url].children %}
{% endif %}
{% else %}
{% assign sublinks = link.weblinks %}
{% endif %}
<li role="none" class="weblink {% if sublinks.size > 0 %} dropdown{% endif %}">
<a aria-label="{{ link.name | escape }}" {% if sublinks.size > 0 -%} href="#" class="dropdown-toggle" data-toggle="dropdown" {%- else -%} href="{{ link.url | escape }}" {%- endif -%} {%- if link.Open_In_New_Window %} target="_blank" {% endif -%} {%- if link.nofollow %} rel="nofollow" {% endif -%} {%- if link.tooltip %} title="{{ link.tooltip | escape }}" {% endif %}>
{%- if link.image -%}
{%- if link.image.url -%}
{%- if link.image.url.first == '.' -%}
<span class="{{ link.image.url | split:'.' | join }}" aria-hidden="true"></span>
{%- endif -%}
{%- else -%}
<img src="{{ link.image.url | escape }}" alt="{{ link.image.alternate_text | default:link.tooltip | escape }}" {% if link.image.width %}width="{{ link.image.width | escape }}" {% endif %} {% if link.image.height %}height="{{ link.image.height | escape }}" {% endif %} />
{%- endif -%}
{%- endif -%}
{%- unless link.display_image_only -%}
{{ link.name | escape }}
{%- endunless -%}
{%- if sublinks.size > 0 -%}
<span class="caret"></span>
{%- endif -%}
</a>
{% if sublinks.size > 0 %}
<ul class="dropdown-menu">
{% if link.name %}
<li role="none">
<a aria-label="{{ link.name | escape }}" href="{{ link.url }}" {% if link.Open_In_New_Window %} target="_blank" {% endif %} {% if link.nofollow %}rel="nofollow" {% endif %} {% if link.tooltip %}title="{{ link.tooltip | escape }}" {% endif %}>{{ link.name | escape }}</a>
</li>
<div class="divider"></div>
{% endif %}
{% for sublink in sublinks %}
<li role="none">
<a aria-label="{{ sublink.name | default:sublink.title | escape }}" href="{{ sublink.url }}" {% if sublink.Open_In_New_Window %} target="_blank" {% endif %} {% if sublink.nofollow %}rel="nofollow" {% endif %} {% if sublink.tooltip %}title="{{ sublink.tooltip | escape }}" {% endif %}>
{{ sublink.name | default:sublink.title | escape }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% assign search_enabled = settings['Search/Enabled'] | boolean | default:true %}
{% if search_enabled %}
<li class="divider-vertical" aria-hidden="true"></li>
<li role="none" class="dropdown">
<a id="search" class="navbar-icon" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" aria-label="{{ snippets["Header/Search/ToolTip"] | default:resx["Search_DefaultText"] | escape }}">
<span class="glyphicon glyphicon-search"></a>
</a>
<div class="dropdown-menu dropdown-search">
{% include 'Search' search_id:'q' %}
</div>
</li>
{% endif %}
<li class="divider-vertical" aria-hidden="true"></li>
{% if website.languages.size > 1 %}
<li class="dropdown" role="none">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" aria-label="{{ website.selected_language.name | escape }}" aria-haspopup="true" aria-expanded="false" title="{{ website.selected_language.name | escape }}">
<span class="drop_language">{{ website.selected_language.name | escape }}</span>
<span class="caret"></span>
</a>
{% include 'Languages Dropdown' %}
</li>
<li class="divider-vertical" aria-hidden="true"></li>
{% endif %}
{% if user %}
<li class="dropdown" role="none">
{% assign username=user.fullname | escape %}
<a href="#" class="dropdown-toggle" title="{{username | default: resx['Default_Profile_name'] }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="username">{{ username | default: resx['Default_Profile_name'] }}</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
{% assign show_profile_nav = settings["Header/ShowAllProfileNavigationLinks"] | boolean | default:true %}
{% if show_profile_nav %}
{% assign profile_nav = weblinks["Profile Navigation"] %}
{% if profile_nav %}
{% for link in profile_nav.weblinks %}
<li role="none">
<a aria-label="{{ link.name | escape }}" href="{{ link.url | escape }}" title="{{ link.name | escape }}">{{ link.name | escape }}</a>
</li>
{% endfor %}
{% endif %}
{% else %}
<li role="none"><a aria-label="{{ snippets["Profile Link Text"] | default:resx["Profile_Text"] | escape }}" href="{{ sitemarkers['Profile'].url | escape }}">{{ snippets["Profile Link Text"] | default:resx["Profile_Text"] | escape }}</a></li>
{% endif %}
<li class="divider" role="separator" aria-hidden="true"></li>
<li role="none">
<a aria-label="{{ snippets["links/logout"] | default:resx["Sign_Out"] | escape }}" href="{% if homeurl%}/{{ homeurl }}{% endif %}{{ website.sign_out_url_substitution }}" title="{{ snippets["links/logout"] | default:resx["Sign_Out"] | escape }}">
{{ snippets["links/logout"] | default:resx["Sign_Out"] | escape }}
</a>
</li>
</ul>
</li>
{% else %}
<li role="none">
<a aria-label="{{ snippets["links/login"] | default:resx["Sign_In"] | escape }}" href="{% if homeurl%}/{{ homeurl }}{% endif %}{{ website.sign_in_url_substitution }}">
{{ snippets["links/login"] | default:resx["Sign_In"] | escape }}
</a>
</li>
{% endif %}
</ul>
{% editable primary_nav %}
</nav>
{% endif %}
</div>
</div>
</div>
{% substitution %}
{% assign current_page = page.id %}
{% assign sr_page = sitemarkers["Search"].id %}
{% assign forum_page = sitemarkers["Forums"].id %}
{% if current_page %}
{% if current_page == sr_page or current_page == forum_page %}
{% assign section_class = "section-landing-search" %}
{% if current_page == forum_page %}
{% assign section_class = "section-landing-forums" %}
{% endif %}
<section class="page_section {{ section_class | h }} color-inverse">
<div class="row sectionBlockLayout sectionFixedStyle" style="display: flex; flex-wrap: wrap; text-align: center; min-height: 420px; background: url('/Homehero.png') center / cover no-repeat; padding: 8px; margin: 0px;">
<div class="container" style="display: flex; flex-wrap: wrap;">
<div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column; justify-content: center;">
{% if current_page == sr_page %}
<h1 id="mainContent">{% editable snippets 'Search/Title' default: resx["Discover_Contoso"] %}</h1>
{% include 'Search' search_id:'search_control' %}
{% endif %}
</div>
</div>
</div>
</section>
{% endif %}
{% endif %}
{% endsubstitution %}
<script type="text/javascript">
window.onload = function() {
if (window.navigator.appName == "Microsoft Internet Explorer" || window.navigator.userAgent.indexOf("Trident") > 0) {
var searchElement = document.getElementById("search");
if (searchElement != null) searchElement.setAttribute("href", "");
}
};
function setHeight() {
var windowHeight = window.innerHeight - 140;
var navbar = document.getElementById("navbar");
if (navbar) {
navbar.style.maxHeight = windowHeight + "px";
}
}
window.addEventListener('resize', function(event) {
setHeight();
});
</script>
Note: If you have multiple header web templates > just use the first one and update it
Step Portal studio:
Syn config > Browse the website > Ctrl + F5
If you see changes in your site but not right. Delete the Default weblink set and then follow the "Step Portal studio".
Hope it helps.
------------
If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.
