I have a header with a horizontal menu on my main site. (merlotembargo.com) I would like a handful of the pages in the site to use a different horizontal menu. I understand that multiple headers is not possible in wix, so I made those particular pages without header/footer, then added a section at the top with a second horizontal menu.
However, it seems I can’t make this menu sticky, and that’s also a wix limitation.
So, i’m looking for creative ways around these limits - ultimately, I just want a different sticky horizontal menu on the top of a few pages of my site. Don’t really care how we get there. It’d be nice if I could edit this menu in a single place, but I can live with having to do multiple edits too.
Can you share a screenshot of the editor you’re using? I see the topic tagged as wix-studio which does support multiple headers (global sections), so just want to clarify if that’s what you’re using, or if it’s just the Wix Editor
There’s a few ways you can do this in the Wix Editor:
As you are currently (hiding, and then having a section, which isn’t great for reusablity)
Or 2 strips within a header, and then code to show/hide according to the page you’re viewing, which would largely keep the header sticky settings. It’s a few short lines - but would generally work based on what you’ve mentioned Happy to put together an example if needed
You’re all good! Ask away, we’re happy to help and have you here either way
ooh, thanks Noah - yeah the two strips idea is good! I wouldn’t say no to your offer for an example…I don’t quote see how do do it unless I have two separate menus, neither of which is the built in horizontal menu.
Use the following code (I’ve added comments in the code to explain how it works)
// Import the Wix module used to detect the visitor's current URL/location
import * as wixSiteLocation from '@wix/site-location';
/**
* CONFIGURATION: Define which pages show which header.
*/
// Pages that should display the first header (#headerOne)
const DISPLAY_HEADER_ONE = [
"/"
];
// Pages that should display the second header (#headerTwo)
const DISPLAY_HEADER_TWO = [
"/about",
"/services",
"/contact",
];
/**
* PAGE SETUP: Runs automatically when the page is accessed.
*/
$w.onReady(async function () {
// 1. Retrieve the URL components (prefix and path) from the current page
const prefix = await wixSiteLocation.location.prefix();
const path = await wixSiteLocation.location.path();
// 2. Reconstruct the components into a full page address (the "slug")
// This format matches the strings defined in the lists above
let currentSlug = "/" + (prefix ? prefix + "/" : "") + path.join("/");
// 3. Execute the function to show or hide the appropriate elements
toggleHeaders(currentSlug);
});
/**
* UI LOGIC: Compares the current page address against the configuration lists.
*/
function toggleHeaders(slug) {
// Check if the current page address exists in the first list
if (DISPLAY_HEADER_ONE.includes(slug)) {
$w("#headerOne").expand(); // Show the first header
$w("#headerTwo").collapse(); // Hide the second header
}
// Check if the current page address exists in the second list
else if (DISPLAY_HEADER_TWO.includes(slug)) {
$w("#headerOne").collapse(); // Hide the first header
$w("#headerTwo").expand(); // Show the second header
}
// If the page address does not match either list
else {
$w("#headerOne").collapse(); // Hide both headers as a default
$w("#headerTwo").collapse();
}
}
You may need to update some IDs, URLs etc according to your use case, but this should give you a starting point to work from
