[Support request] How to do the menu as same as this?

Home Forums Support How to do the menu as same as this?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #988727
    weiqispace

    How to do the menu as same as this?

    https://www.styleshout.com/templates/preview/Infinity10/#about

    sticky and sidepanel?

    Thanks

    #988787
    David
    Staff
    Customer Support

    Hi there,

    1. Customizer > Layout > Off Canvas and enable for desktop and mobile.
    2. Create a new Dashboard > Appearance > Menu and assign it to the off canvas.
    3. Create another menu that contains no menu items and assign this to the Primary Navigation.
    4. Customizer > Layout > Sticky Navigation – enable this.

    If you want the menu overlaying the background then you can do this with a Header Element.

    #988798
    weiqispace

    Hi there

    I don’t see off canvas under layout.

    GP Premium version is 1.8.3

    Do I miss something?

    Thanks

    #988806
    David
    Staff
    Customer Support

    Do you have the Menu Plus module activated in Appearance > GeneratePress?

    #989400
    weiqispace

    I find it.

    I follow the step you gave and I have a few questions.

    1、How to create transparent header? Currently,It is white space.

    2、How to add MENU text on the left of the sidepanel icon?

    Thanks

    #989549
    David
    Staff
    Customer Support

    1. In your Header Element – go to the Site Header tab and select Merge with Site Header, this will also provide you options to change the Navigation colors when the header is merged.

    2. Add Menu to desktop toggle:

    .sf-menu>li.slideout-toggle:before {
        content: 'MENU';
    
    }
    .sf-menu>li.slideout-toggle {
        display: flex;
        align-items: center;
    }

    2.1 Swap Menu label and toggle on mobile

    .menu-toggle:before {
        content: "";
    }
    
    .menu-toggle:after {
        content: "\f0c9";
        font-family: GeneratePress;
        width: 1.28571429em;
        text-align: center;
        display: inline-block;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.