▼
Streaming live at 10am (PST)

How can i use an element as a trigger to open the navbar thats not within the navbar "menu button"?

Design help Animations & Interactions
#1

Hi everyone,

i’m quite new to Webflow and I just ran into an issue i can’t seem to solve on my own and i have not found the solution to my problem in the forum.

The menu I made consists of an arrow (functioning as the Menu Button to open the navbar) that moves along as you scroll down the page, sticky.

The thing I am stuck with is: I also want the Navbar to open when klicking “menü” (the symbol called “seitentitel” (= “page title”) next to the arrow). It should behave in the exact same way as if i clicked the menu button.

I cannot just put the “menü” headline in to the “navbar - menu button” because i want the position of the Headline static, while only the arrow should be sticky.

I am working with the premade “Navbar” Elements by Webflow.

Thanks in advance, any help or hint is very much appreciated.

Franziska

read only Link to my project

#2

Hey there, you can use a simple custom code to trigger the Menu Button.

$('.link-sans-small').on('click', function(){
  $('.menu-button').click();
})

If it doesn’t work, please share the published link. :slight_smile:

#3

Hi there! Thanks a lot for your answer, I think this might be it! I’m having trouble enbedding the custom code. I opened the settings, open “Custom Code” and i basically just pasted what you wrote, but it didn’t work. I tried in in the head and in the footer, with " and without, but no option worked. Am I missing something here?

https://mariagertrude-at.webflow.io/
Do you mean this link? or what do you mean with published link?

Thank you for your help! :slight_smile:

#4

Yes thats the link.

For some reason I can’t load webflow on my end, so just to make sure. You added the code in the Custom Code section on site settings, in the 'before ’ section. You need to wrap the code in tags.

Edit: can you put it back into the Footer Code and let me check the published link after.

#5

I chance it like you said. Thank you very much!

#6

Thank you @dennyhartanto for your help!

when i pasted the custom code in the project setting it didn’t work. But when i paste it in the custom code section of a page it worked. i don’t know why, but it did.

so, i pasted the code you recommended:

<script>
$('.link-sans-small').on('click', function(){
  $('.menu-button').click();
})
</script>

into the footer settings of the custom code section of every page (within the designer)

thanks for your help!

Edit: just found what my mistake was: i didn’t know that i had to push my changes in the general settings. I thought it would automatically push my changes in the stettings when i push it in the designer. whoopsie!

#7

This custom code depends on jQuery. When I tried adding it to the global header, I got the error $ is not defined. That’s because jQuery is imported in the footer. For future users, add this to the global footer of your page (I added the document ready function, it’s just best practice to keep your js in one):

<script>
  $(document).ready(function() {
    $('.close-the-menu-when-this-class-is-clicked').on('click', function(){
      $('.menu-button').click();
    })
  });
</script>