Hey Katheryn. Not too long ago I had this issue, but I think I found a solution to it. It’s slightly different your example website, but the same sort of thing…
So, firstly, I moved my logo and menu onto a normal strip, adjusted the size to how I liked, and named it #defaultHeaderstrip. Then, I extended the hight of the header, not the #defaultHeaderstrip, but the header itself. Next, I placed about 5 different strips, all on top of one another, in this new gap (in the header) and selected each one to be ‘collapsed on load’. I named each individual strip the relevant name, so I could identify each one. (e.g. #aboutMenustrip).
I then removed the traditional horizontal menu that Wix offers, and instead put 5 individual buttons, all in a line. This gave the impression of a horizontal menu, but was in fact 5 separate buttons, all with the same design. Again, I named each button accordingly (e.g. #aboutButton).
Next, I populated each of the 5 separate strips with the required buttons that took users to various parts of the site. To keep it nice and simple, I just put text elements in the strip, and linked the text to the relevant pages.
This meant that I had now created 5 large dropdown menus within my header, each with links, that would appear on every page. As they were set to collapsed on load, when viewing the site, the header was normal size, and all 5 of the drop down strips were collapsed and invisible.
Now, for the code. It’s really simple, nothing complicated. The only function you need to be aware of is collapse() and expand().
So, the following code is relevant just for one of the drop downs, the #aboutMenustrip:
export function aboutButton_mouseIn(event) {
$w(‘#aboutMenustrip’).expand()
}
export function aboutMenustrip_mouseOut(event) {
$w(‘#aboutMenustrip’).collapse()
}
Let me break down what this code is doing:
- a user hovers over the About button on the header
- the large, screen-wide strip with the various links for the about section expands within the header
- if the user moves the mouse off of the strip (NB: NOT THE BUTTON), then the strip collapses, returning the header to normal size.**
** This has a dual purpose. It means that:
(a) users can move their mouse within the drop down, after having opened it, and it will remain open while they choose where to go; and
(b) once users move back to the page they are on, or another button (triggering another drop down), the expanded drop down collapses.
Make sure to put that code on the Site Code not the Page Code, and it will work on every page.
I never actually finished the site I was doing this for, as the guys who hired gave up on their project. Its for a academic resource that never worked, only thing on there is this drop down type thing (only one though, not 5). If you hover over ‘Subjects’ then it will come up.
https://tamjrtraynor.wixsite.com/reviseandlearn
I hope that all makes sense, any questions just ask! Hopefully this gets to you before your deadline!
