Hello,
Is there any quick way to set the menu ( Header ) on the left side ?
any idea please?
Thank you
*This post is locked for comments
You can override the css.
Change
.navbar-toggle
{
float: right;
}
to
float: left;
Hope this helps.
Hi
Thank you for the answer, with this i'll get the menu always on the top, while I want to set it on the left side.
Actually my menu is :
Home | Item 1 | Item 2 | Item 3
what I wanna get is :
Home
Item1
Item2
Item 3
could you please help?
thank you
Hi Sskod,
I would recommend you to create your own web template in order to design the header as per yoir need, and associate it with your website/portal record
or
You can customize the OOB Header Web Template as well. But better to go with your own.
You can take the help of OOB header web template to display the portal weblinkset and weblinks in your own template using liquid template and can design and place the controls as per your need.
By doing this, you can better manage and control the CSS and UI of header as well.
Hope it helps.
Mark this an anwser. If it helps.
Cheers
Arpit
[View:https://arpitmscrmhunt.blogspot.in]
Hi Arpit,
Thank you, is there any way to generate Liquid templates quicly ? i'm a new in portal and it's my first experience :(
Thanks
There is no easy way to generate liquid templates quickly, but there is a tool in XrmToolbox called Portal Code Editor, which might be helpful. Download XrmToolbox and see if it helps you in any way.
To get a handle on Liquid the first place is to look at the existing web templates that come installed with the portal
(Portal -> Web Templates).
The official documentation (while somewhat lacking) is here, but is still required reading:
docs.microsoft.com/.../create-advanced-templates
I also encourage you to check out some blogs (mine included last on this list, shameless self promotion) as they have articles on getting started and using Liquid and Portal in general.
http://colinvermander.com/
www.engineeredcode.com/blog
readyxrmblog.wordpress.com
Nick
You will have to start writing the Liquid Template by taking reference of articles shared by other experts.
I can only suggest you the way or sample code to start with:
Below is the code, I have used to shift the whole menu navigation to Left. Not properly align though. But you can create your custom Header template, paste the below code and change the look and feel as per your need.
'My Header' Liquid Template:
{% assign homeurl = website.adx_partialurl %} <div class="navbar navbar-inverse navbar-static-top" role="navigation"> <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 navbar-brand"> {% editable snippets 'Navbar Left' type: 'html' %} </div> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" onclick="setHeight();"> <span class="sr-only">Toggle navigation</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["Primary Navigation"] %} {% if primary_nav %} <div class="navbar-right menu-bar {% if primary_nav.editable %}xrm-entity xrm-editable-adx_weblinkset{% endif %}" data-weblinks-maxdepth="2" style=" line-height: 54px; float: left; position: absolute; top: 97%; left: -2px; background-color: black; list-style-type: none; color: white; padding-top: -24opx; "> <ul class="nav navbar-nav weblinks" style=" list-style-type: none; color: white;width: 161px; position: absolute;background-color: black; "> {% for link in primary_nav.weblinks %} {% unless forloop.first %} {% 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 class="weblink {% if sublinks.size > 0 %} dropdown{% endif %}"> <a {% 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 startswith '.' -%} <span class="{{ link.image.url | split:'.' | join }}" aria-hidden="true"></span> {%- 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" role="menu" style=" margin-left: 26px; position: inherit; "> {% if link.url %} <li> <a href="{{ link.url }}" {% if link.Open_In_New_Window %} target="_blank" {% endif %} {% if link.nofollow %}rel="nofollow" {% endif %} {% if link.tooltip %}title="{{ link.tooltip }}" {% endif %}>{{ link.name }}</a> </li> <li class="divider"></li> {% endif %} {% for sublink in sublinks %} <li> <a href="{{ sublink.url }}" {% if sublink.Open_In_New_Window %} target="_blank" {% endif %} {% if sublink.nofollow %}rel="nofollow" {% endif %} {% if sublink.tooltip %}title="{{ sublink.tooltip }}" {% endif %}> {{ sublink.name | default:sublink.title }} </a> </li> {% endfor %} </ul> {% endif %} </li> {% endfor %} {% assign search_enabled = settings['Search/Enabled'] | boolean | default:true %} {% if search_enabled %} {% endif %} {% if website.languages.size > 1 %} <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" 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> {% endif %} {% if user %} <li class="dropdown"> <a href="#" class="dropdown-toggle" title="{{ user.fullname | escape }}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="username">{{ user.fullname | escape }}</span> <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" style=" margin-left: 26px; position: inherit; "> {% 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> <a href="{{ link.url | escape }}" title="{{ link.name | escape }}">{{ link.name | escape }}</a> </li> {% endfor %} {% endif %} {% else %} <li><a href="{{ sitemarkers['Profile'].url | escape }}">{{ snippets["Profile Link Text"] | default:"Profile" }}</a></li> {% endif %} <li class="divider" role="separator"></li> <li> <a 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> <a href="{% if homeurl%}/{{ homeurl }}{% endif %}{{ website.sign_in_url_substitution }}"> {{ snippets["links/login"] | default:resx["Sign_In"] }} </a> </li> {% endif %} </ul> {% editable primary_nav %} </div> {% endif %} <div class="navbar-right hidden-xs"> {% editable snippets 'Navbar Right' type: 'html' %} </div> </div> </div> </div> {% substitution %} {% assign current_page = page.id %} {% assign sr_page = sitemarkers["Search"].id %} {% assign forum_page = sitemarkers["Forums"].id %} {% 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="container"> <div class="row "> <div class="col-md-12 text-center"> {% if current_page == sr_page %} <h1 class="section-landing-heading">{% editable snippets 'Search/Title' default: resx["Discover_Contoso"] %}</h1> {% include 'Search' %} {% endif %} </div> </div> </div> </section> {% endif %} {% endsubstitution %} <script type="text/javascript"> 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>
Mark the answer verified If it helps.
CheersArpithttps://arpitmscrmhunt.blogspot.in
Worked like a charm. Thank you so much
Under review
Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.
As AI tools become more common, we’re introducing a Responsible AI Use…
We are honored to recognize Pallavi Phade as our Community Spotlight honoree for…
These are the community rock stars!
Stay up to date on forum activity by subscribing.
Community Member 2
UllrSki 2
SC-08081331-0 1
