[Resolved] Mobile Menu

Home Forums Support [Resolved] Mobile Menu

Home Forums Support Mobile Menu

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #2155816
    kernfunke

    Can you get the search in the mobile menu? BUT NOT in the main menu? So in such a way that it is only displayed on mobile?
    Is it possible to mark the main points in bold and indent the submenus?
    Can the slide-out be made a bit larger so that it takes up around 90% of the screen width?

    #2155980
    Ying
    Staff
    Customer Support

    Hi there,

    Yes is the answer to all your questions 🙂

    Can you link us to your site so we can see your current structure?

    You can use the private info field for that.

    #2182394
    kernfunke

    Hi Ying,
    have you received the “private information” I had sent?

    #2182495
    Ying
    Staff
    Customer Support

    No, I haven’t.

    Where did you send it to?

    You can use the private info field in this forum for private info, it will only be seen by the support team:
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    #2195938
    kernfunke

    Hi there,
    here comes the information on private…

    #2195950
    David
    Staff
    Customer Support

    Hi there,

    1. Adding the Search Field to Off Canvas

    Go to Appearance > Elements
    Create a new Element > Block and set the Type to Hook:
    https://docs.generatepress.com/article/block-element-hook/

    Add a Search Block to the content
    Set the Hook to: inside_slideout_navigation
    Publish those changes.

    This will add the search to the top of the Off Canvas Panel.

    2. Add the off set to the Sub Menus with this CSS:

    .slideout-navigation.main-navigation .main-nav ul ul {
        padding-left: 10px;
    }

    3. Font styles in Customizer > Typography there are options for the OFf Canvas Menu and Sub Menus

    4. Do you still want the off canvas to be wider ?

    #2202775
    kernfunke

    Hi there,

    can you help me with the above mentioned instruction:
    “Add a Search Block to the content”
    How? And where?

    #2202782
    David
    Staff
    Customer Support

    When you create a new Block Element in the Block Editor, choose the add new block ( + icon ) and in the search field provided type: Search. It should bring up the Search Block to add to the page.

    #2202813
    kernfunke

    Thanks it worked out.

    Now the next step:
    2. Add the off set to the Sub Menus with this CSS:

    .slideout-navigation.main-navigation .main-nav ul ul {
    padding-left: 10px;
    }

    where exactly do I enter this code?

    #2203029
    David
    Staff
    Customer Support

    That is CSS.
    Go to Customizer > Additional CSS and paste the code in the text area provided.
    If there is already some CSS in there, place your cursor on the first line and hit enter to add some linebreaks so you can paste in that code.

    #2203062
    kernfunke

    Ok. I tried that before but it doesn’t work or show any effect.

    Here again the full code. Last CSS code right at the bottom:

    /*off canvas mobile menu full screen*/
    .slideout-overlay {
    background: #3DB5E6;
    }

    .offside–right.is-open {
    right: auto;
    left: calc(50% – 132.5px);
    transform: translate3d(0,0,0);
    }

    .nav-aligned-right.nav-below-header .main-navigation.slideout-navigation {
    text-align: left;
    }

    #generate-slideout-menu .slideout-menu li {
    text-align: left;
    }

    /* Solid lines
    #generate-slideout-menu .slideout-menu li a {
    border-bottom: 1px solid #fff;
    }
    End Solid lines*/

    .offside-js–is-right.slide-opened .slideout-overlay button.slideout-exit {
    right: 0;
    }

    .main-navigation.slideout-navigation {
    background: transparent;
    padding-top: 10%;
    }

    li.slideout-toggle {
    position: absolute;
    right: 0;
    }

    .main-navigation .main-nav ul li.slideout-toggle a {
    padding: 15px;
    line-height: normal;
    }

    .inside-navigation {
    position: static;
    }

    .slideout-navigation.main-navigation .main-nav ul ul {
    padding-left: 10px;
    }

    #2203097
    David
    Staff
    Customer Support

    This CSS:

    .main-navigation .main-nav > ul > li.menu-item-has-children > a .dropdown-menu-toggle {
        display: none;
    }

    is also hiding the slideout navigation submenu toggles so you cannot open them, change that CSS to this:

    .main-navigation:not(.slideout-navigation) .main-nav > ul > li.menu-item-has-children > a .dropdown-menu-toggle {
        display: none;
    }
    #2204098
    kernfunke

    Thanks again for your great and detailed help.

    Now I’ve just got three minor issues left:

    1. How do I get this search bar and the menu to full screen width on mobile? At the moment it just covers a little more than half of the screen. (Please check the information I had posted in the private section)

    2. The Closing “X” should be outside the search bar and aligned to it and inside the search bar at the end there has to be a search icon.

    3. If I would activate the “solid lines” they would appear under each menu item. But according to the design pattern I need the lines only between “Über uns” and “Mein Konto” and another one between “Warenkorb” and “Impressum”. How can I do that?

    #2204119
    David
    Staff
    Customer Support

    1, Add this CSS for full width slideout nav:

    #generate-slideout-menu.main-navigation.offside {
        width: 100%;
    }
    #generate-slideout-menu.main-navigation.offside--left {
        left: -100%;
    }
    #generate-slideout-menu.main-navigation.offside--left.is-open {
        transform: translate3d(100%,0,0);
    }

    1.1 For the search to reach that width – can you first edit the element and select the Container Block the search is inside of an in Sidebar > Advanced > Additional CSS classes add: oc-search-container.

    Once thats in place you can add this CSS to your site:

    .oc-search-container {
        width: calc( 100% - 30px);
    }

    2. In the Customizer > Layout > Off Canvas set the Close button to inside.

    2.1 Adding the icon should be an option in the Search Blocks toolbar.

    3. Can you explain ?

    #2204157
    kernfunke

    Thanks a lot. It worked out well.

    To No. 3
    If you look at the offcanvas code above, there is a part which I had deactivated:

    /* Solid lines
    #generate-slideout-menu .slideout-menu li a {
    border-bottom: 1px solid #fff;
    }
    End Solid lines*/

    If I would activate that again, it would show solid lines under each menu item. But I only need the solid lines at two specific places:

    Only between “Über uns(About us)” and “Mein Konto(MyAccount)” and another one between “Warenkorb(Cart)” and “Impressum(Imprint)” (See the design pattern in private information)

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