Hi Shannon,
Which page do you want to hide the navigation on? You'll need to open up developer tools and find the collection id for that page. (It's in the list of body classes and looks like: collection-5d978ee6590a832f3c3fe6d4)
Then you could do something like:
#collection-id #topNav{
display:none;
}
If you want to remove the whole sidebar it would be:
#collection-id {
#headerWrapper{
display:none;
}
.header-position-fixed-left #pageWrapper{
margin-left:0px;
max-width: unset;
}
}
This would all go into your Custom CSS.
I forgot to say I am talking about the Menu blocks in 7.0 and am currently working on Brine.
Ok here's what I figured out using JavaScript and jQuery. This won't work if you have multiple Menu blocks on the same page.
I decided to use the anchor link URL syntax rather than variables for tidiness. This should take a URL in the format: https://example.com/menu-page#menu-name
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- SMART URLs FOR MENU BLOCK -->
<script>
$(document).ready(function(){
var anchor = getUrlAnchor();
if (anchor) {
$(".menu-select-labels").each(function(){
var name = $(this).text();
var slug = slugify(name);
if (anchor == slug){
$(this).attr("tabindex", "0");
$(this).attr("aria-selected", "true");
$(this).addClass("menu-select-labels--active");
} else {
$(this).attr("tabindex", "-1");
$(this).attr("aria-selected", "false");
$(this).removeClass("menu-select-labels--active");
}
});
$(".menus--has-multiple .menu").each(function(){
var name = $(this).attr("aria-label");
var slug = slugify(name);
if (anchor == slug){
$(this).css("display", "block");
} else {
$(this).css("display", "none");
}
});
} else {
var name = $(".menu-select-labels--active").text();
var slug = slugify(name);
updateUrl(slug);
}
$(".menu-select-labels").click(function(){
var name = $(this).text();
var slug = slugify(name);
updateUrl(slug);
});
});
</script>
Here's a function to retrieve the anchor link from the URL (the part after the #):
<script>
var getUrlAnchor = function getUrlAnchor() {
var url = window.location.href;
if (url.indexOf('#') > 0){
return url.substring(url.indexOf('#') + 1);
}
return false;
};
</script>
And another one to update the URL with the current menu:
<script>
var updateUrl = function updateUrl(slug) {
const state = { 'menu_id': slug };
const title = document.title;
const url = window.location.href;
const baseUrl = url.substring(0, url.indexOf('&'));
const newUrl = baseUrl + "#" + slug;
history.pushState(state, title, newUrl);
return newUrl;
}
</script>
And finally a helper function to slugify the menu names since Squarepsace doesn't do this anywhere (this one I borrowed from the internet):
<script>
// Slugify a string
var slugify = function slugify(str) {
str = str.replace(/^\s+|\s+$/g, '');
// Make the string lowercase
str = str.toLowerCase();
// Remove accents, swap ñ for n, etc
var from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆÍÌÎÏŇÑÓÖÒÔÕØŘŔŠŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;";
var to = "AAAAAACCCDEEEEEEEEIIIINNOOOOOORRSTUUUUUYYZaaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------";
for (var i=0, l=from.length ; i<l ; i++) {
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
}
// Remove invalid chars
str = str.replace(/[^a-z0-9 -]/g, '')
// Collapse whitespace and replace by -
.replace(/\s+/g, '-')
// Collapse dashes
.replace(/-+/g, '-');
return str;
}
</script>
ThisJustin's post in Hide Navigation Atelier 7.0 on a single page was marked as the answer
