Pin Button to page and keep interactive while placed at header

Ask the community
,
1

Hey!

I’d like to place a interactive button with hover-over dropdown menu (using Event/onMouseIn to make a content box appear) in my header next to my navigation menu.

My navigation menu is placed slightly outside the gridlines as I want it to be placed on the far left of the page therefore I have selected the navigation bar to be stretched to the full width. When I simply attach and place the button into the header, then the fully stretched navigation menu is fixed in place, however when I change the width of my browser window, the button alone is not fixed and moves into the navigation menu.

I tried to pin the button to the page, however then it disappears outside of the header - falls behind it - and I’m not able to click it anymore.

Is there any way I can fix the button or any other element in the header so I can allocate the drop down menu via “on Mouse In” effect, so the button will stay on the correct position also for users using different screen sizes?

2

Image of Menu:

Fixed navigation menu (stretched to full width)

2136×1978 584 KB

3

I have a similar problem. I created a side menu for my sub-sub-folders and it’s too long. Some of the elements get lost behind the header as one scrolls down the page. I think there is no easy fix around it, unfortunately.

4

@toniabkscorsese
When working with HEADER and BODY, or FOOTER you should always pay attention on following things…

  1. blue-body-area should not cross the orange-header-area.
  2. using strips may solve some responsivibility-problems.
  3. menus can be created by using multistate-boxes inside header and footer (for example)
  4. also the usage of expanding and collapsing the header and footer elements can help.