Trigger Dropdown menu from button in header

Support
#1

Hello,

I have two buttons in my header using the header builder. I’d like to trigger a dropdown menu from those buttons. How do I do this?

URL: https://v2.unikpieces.ch/
mdp: E-MM

Here is the code I used to have the two buttons:

[button href="/communaute/" style="padding-top:2px; padding-bottom:2px; margin-bottom:5px;"]COMMUNAUTÉ[/button]<br>
[button href="/createurs/"  style="padding-top:2px; padding-bottom:2px; padding-left:30px; padding-right:31px;"]CRÉATEURS[/button]

Thanks for your help!

#2

Hi There,

You can use a Inline menu element and assign a menu with just 1 parent link and style the menu top link to look like a button.

Hope it helps

#3

Thank you for the information. One question though: How do I “style the menu top link to look like a button”?

Moreover, how can I manage to have to button vertically aligned?

Thanks,
Antoine

#4

Hi there,

You can add x-btn class to your button’s class attribute. But I’m not sure why you’re doing that, you’re in pro header builder and adding a button element should do.

Thanks!

#5

Thanks. Please see my first post in this topic to understand what I want to achieve. The buttons should trigger a dropdownmenu and should be vertically aligned, which is why is is slightly more complicated and I can’t simply use a button element.

I did not manage to make it work so far and your help would be greatly appreciated.

Thanks.

#6

Hi There,

Please provide your URL and let us know which links you want to style as a button.

Thanks

#7

Hi,

I’d like to make the two buttons on the right side of the header with a dropdown menu.

URL: https://v2.unikpieces.ch/label/
(Pwd: E-MM)

Thanks for your help!

#8

Hi there,

Please kindly add a navigation collapse element to the header. Then go to the Toggle tab of the options of that element:

Set the width and height of the toggle elements to look like a button:

Set the Border radius option to 0:

If you are interested add a solid border to the button.

Enable the text of the button and add whatever you want as the button text:

Disable the graphics setup:

Now you will have a navigation collapse element that the toggle of that element will look like a button:

Thank you.

#9

Thank you very much. One question though: how can I have two such buttons that are vertically aligned?
(As you can see here: https://v2.unikpieces.ch/ on the right side of the header (Pwd: E-MM))

#10

Hi there,

Go to the Container which contains the buttons and in the Flex option set it to be column based, and space between:

I suggest that you take a look at our flex tutorials which will help you grasp an idea of how the layout works:

Thank you.

#11

Thank you for the awesome support!

#12

Glad we could help.

Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.