[Resolved] Customize advanced hamburger, off canvas slide in menu for desktop & mobile

Home Forums Support [Resolved] Customize advanced hamburger, off canvas slide in menu for desktop & mobile

Home Forums Support Customize advanced hamburger, off canvas slide in menu for desktop & mobile

Viewing 15 posts - 16 through 30 (of 38 total)
  • Author
    Posts
  • #1208955
    Chelsea

    Ok thank you David,

    Do you have an advanced search (premium) plugin you recommend that will play well with Generate Press Premium and Beaver Builder. I’m creating a site that has a lot of articles, media, podcasts, etc. that need to be well organized and easily searched. Curious if you have a plugin in mind? Love your thoughts!

    Aloha! & Thank you again!

    #1209214
    David
    Staff
    Customer Support

    Any well coded plugin will play nicely with GP.
    It really depends what you need from your search.

    If you chose a plugin that provides a shortcode or a PHP function we can help hook that into the navigation.

    #1211263
    Chelsea

    Thank you David!

    Great! Sounds good. Best wishes to you and take great care. I’ll close this topic and open a new one if I have another topics to discuss.

    Aloha!

    #1211678
    David
    Staff
    Customer Support

    You’re welcome – glad to be of help ๐Ÿ™‚

    #1249951
    Chelsea

    Aloha David,

    I reopened my Support Forum ticket regarding the left side Off Canvas Menu because a portion of the css code you provided was causing an error with the plugin “Sticky Menu (or Anything!)” when testing on Google Chrome Browser. Safari and Firefox had no conflict but basically the “sticky” feature was not working on the designated row when viewing the website in Chrome.

    I troubleshooted the issue (testing plugins, etc.) and discovered that if I removed this line of custom css that was provided the “Sticky Menu (or Anything!)” plugin worked accordingly on Chrome:

    /* Menu left */
    .site,
    .main-navigation {
    -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
    -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
    -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
    transition: transform .2s cubic-bezier(.16, .68, .43, .99);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    }

    I tested this further and found that if I kept a portion of the css code you provided (but left out the above code) the left side “off canvas menu” functionality I was looking for still worked. So I’m wondering – do I need that above code? Curious if I can just use the following css below (it seems to be working and it is not breaking the Sticky Menu or Anything plugin). Look forward to your thoughts! Thank you!

    .slide-opened .site,
    .slide-opened .main-navigation {
    -webkit-transform: translate3d(265px, 0, 0);
    -moz-transform: translate3d(265px, 0, 0);
    -ms-transform: translate3d(265px, 0, 0);
    -o-transform: translate3d(265px, 0, 0);
    transform: translate3d(265px, 0, 0);
    }

    .slideout-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
    }

    .main-navigation:not(.slideout-navigation) .main-nav,
    #mobile-header .menu-toggle {
    order: -1;
    }

    .main-navigation li.search-item {
    position: absolute;
    right: 0;
    }

    #1250669
    David
    Staff
    Customer Support

    Hi there,

    the first part of the CSS should responsible for the smooth transition when the Site is shifted over on menu open. Any chance i can see the site without that code ?

    #1252158
    Chelsea

    Aloha David,

    Please make this chat box private. Thank you!

    FYI: I’m using the “Sticky Menu (or Anything)” feature on the pages: “Consciousness & Psychedelics”; “Love & Compassion”; “Service”; “Relationships”; “Meditation”; & “Death & Dying” (these are submenu items of the “Teachings” menu tab). Basically before troubleshooting this issue and removing that CSS code – the row with a blue / light green gradient and the menu links: “Articles, Audios, Podcast, Vides, etc.” which is placed just below the page header (dark blue bar) is the row that I made “sticky” – This is the row that was not working when viewing the website on Chrome — that was until I removed that line of CSS Code. However I do notice that currently when I click the MENU hamburger menu and the site pushes to the right and has a color overlay it seems like the row with the gradient that I made “sticky” does a strange thing where it bounces down and no longer is placed just below the header… hmmm so perhaps removing that CSS was not the solution?

    Also note that it’s interesting that you say that the code I removed creates a smooth scroll. Before removing the code I also had an issue with background row photos (that I attached as “fixed” ) bouncing a bunch while scrolling. Once I removed the CSS code in question the background row images scrolled smoother vs. being very jumpy on scroll.

    On another note but an FYI: I did add the CSS below to the “Additional CSS” to make it so the “Teachings” parent menu’s submenus automatically expand without clicking “Teachings”. Just wanted you to know I added this to make that effect happen so you don’t think it’s a mistake : ).

    /* Main Navigation Submenu Expand */
    .main-navigation ul li.menu-item-42 ul {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    }

    Thank you David!

    Aloha!

    #1252805
    David
    Staff
    Customer Support

    BTW – we don’t have a private option in the forum but we removed your URL etc.

    I can’t see that Sticky Menu plugin working for you. Even without opening the Off Canvas menu your secondary sticky nav is just not responsive. Try resizing the browser – it breaks all responsive behaviour of that element.

    You could remove the plugin and we can look at some position: sticky; CSS to fix it instead.

    #1254174
    Chelsea

    Aloha David,

    Understood about privacy and removing url – thank you. And Yes! let’s explore CSS! “Sticky Menu (or Anything)” plugin is definitely wonky and doesn’t work well with responsive behavior.

    I’d love to know the best CSS to use for Generate Press Premium and Beaver Builder plugin.

    Thank you! Thank you!

    #1254819
    David
    Staff
    Customer Support

    Add some CSS like this:

    .sticky-element {
        position: sticky;
        position: -webkit-sticky;
        top: 60px;
    }

    Then add the sticky-element code to the Beaver Builder row. Adjust the 60px on the top property to suit.

    This method works best with elements that are set to full width.

    #1255483
    Chelsea

    Aloha David,

    Thank you! Works great! I also added a z-index:10;

    I put the CSS code you originally provided (which I had removed while troubleshooting the Sticky Menu (or Anything) plugin) back into the mix and all seems to be working:

    /* Menu left */
    .site,
    .main-navigation {
    -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
    -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
    -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
    transition: transform .2s cubic-bezier(.16, .68, .43, .99);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    }

    Also happy to report that my background fixed row images are not “bouncy” like they once were. I think the issues all came from the plugin.

    Thank you again! Super grateful!

    Aloha!

    #1257419
    David
    Staff
    Customer Support

    You’re welcome ๐Ÿ™‚

    #1354527
    Chelsea

    Aloha David / Generate Press Team!

    I’m adding a question to this support thread as it relates to the custom css you provided for the left side hamburger menu that is an off canvas menu that slides in on the left side.

    Wondering if you have any adjustments to add on the css / Generate Press theme side of things to make the home page include the OptinMonsters Floating Top Bar optin when pushing the content to the right and placing a filter over the content when the hamburger menu is selected. OptinMonster is currently covering the upper portion of the slide in menu when the hamburger menu is selected.

    I also have this question out to OptinMonster but want to see if any of the css that you provided in our support thread here relates to fixing this? or if you have a solution : )

    Thank you!!!

    #1354738
    Chelsea

    Just wanted to add to earlier thread… Seems like the optin covers the sticky scrolling header /menu and the off canvas menu is still loading at the top of the page… which makes part of it covered. Wondering if in addition to my above question…if the css or theme can be adjusted to push the slide out menu to make it even with header / menu bar while an optin like OptinMonster is taking over the top of the page?

    #1354754
    David
    Staff
    Customer Support

    Can you provide login details for the URL you provided in your original topic?

Viewing 15 posts - 16 through 30 (of 38 total)
  • You must be logged in to reply to this topic.