Off canvas menu

Hi there,

tricky one.
Do you have a site ready that you want this applied to ? As this will help me to look at the best options ?

Hello David,
you can try it on this site (private information).

Thanks!

Swen

Hi there,

As David said, this is going to be tricky as its a combination of multiple things.

We can start with the simple ones.

For the menu icons, here's how to do it:
https://docs.generatepress.com/article/adding-icons-to-menu-items/

As for the side menu, does it open/collapse like an actual off-canvas slideout menu?

If not, this seems pretty close to one of our site library template, "Sider".

Check it out here: http://gpsites.co/sider/

This one doesn't use off-canvas menu, it styled the header to display that way using CSS. We can do this on your site as well along with the animations.

Let us know if this is the case.

Hello Elvin,
It's not a Sider.
I only want three icons with a hover. E-mail (link to contact page, ? (link to faq page), search icon (open the search bar).
Similar to this.

off canvas menu

Thanks!

Its going to take custom development to achieve that.
And you will need to consider what happens on smaller screens - as you have a site with a 1260px wide content container - so it would only be visible on large screens.

Hello David,
it´s only for desktop versions.

Thanks!

Its going to require a Hook Element to add the HTML:

1. Create a new Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Add this HTML:

<div class="ocf-panel">
	<div class="ocf-row">
    <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path></svg>
    <span class="ocf-content">
      <a href="email-link">Contact</a>
    </span>
	</div>
	<div class="ocf-row">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="question" class="svg-inline--fa fa-question fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"></path></svg>
    <span class="ocf-content">
      <a href="link-url">Link</a>
    </span>
	</div>
	<div class="ocf-row">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
    <span class="ocf-content"><?php get_search_form(); ?></span>
	</div>
</div>

You will need to update the SVG icons if you want, and change the <a> links

Select the generate_after_footer hook
Check the Execute PHP option
And set the Display Rules to Entire Site.

2. Add this CSS to your site:

.ocf-panel {
  position: fixed;
  padding: 10px;
  top: 100px;
  max-width: 200px;
  right: calc(((100vw - 1260px)/2) - 100px);
  /* right positioning 1260px = width of contanier */
  /* -100px adjust position to side of container */
}

.ocf-row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;

}

.ocf-row svg {
  height: 20px;
  width: 20px;
}

.ocf-row .ocf-content {
  padding-left: 10px;
  transition: all 0.2s;
}

.ocf-row .search-form {
  max-width: 100px;
}

.ocf-row .search-form input {
  font-size: 14px;
  padding: 5px
}

.ocf-row .search-form .search-submit {
  display: none;
}

.ocf-panel:not(:hover) .ocf-content {
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
}
/* Set screen width when element is removeed */
@media(max-width: 1360px) {
  .ocf-panel {
    display: none;
  }
}

Hello David,

you are great, thank you very much!
I'll show you the result.

Glad to be of help!