[Resolved] Off canvas menu – Overlay

Home Forums Support [Resolved] Off canvas menu – Overlay

Home Forums Support Off canvas menu – Overlay

  • This topic has 13 replies, 2 voices, and was last updated 1 month ago by Ying.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1932932
    ammgbr

    Hello two Qs re the mobile version of off canvas menu set in the overlay mode.

    1. How could I have the menu items in the left hand side rather than centrally and without the vertical line by their side?

    2. How could I remove the MENU writing and just have the menu icon?

    GP Premium: 2.0.3

    #1932990
    Ying
    Staff
    Customer Support

    Hi Polyvios,

    For question 1, can you link us to the site in question?

    You can use the private information field.
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    For question 2, go to Customizing > Layout > Primary Navigation, remove the Mobile Menu Label.

    Let me know πŸ™‚

    #1932996
    ammgbr

    Thank you
    Yes link provided

    #1933024
    Ying
    Staff
    Customer Support

    Give this CSS a try:

    #generate-slideout-menu.do-overlay .slideout-menu li {
        float: none;
        width: 100%;
        clear: both;
        text-align: left !important;
    }
    .slideout-navigation.do-overlay .menu-item-has-children .dropdown-menu-toggle {
        border-left: none !important;
    }

    Let me know πŸ™‚

    #1933037
    ammgbr

    I tried that but did not work

    #1933053
    Ying
    Staff
    Customer Support

    I don’t see the second part has been added to your site yet, can you confirm?

    I’ve edited the CSS here:
    https://generatepress.com/forums/topic/off-canvas-menu-overlay/#post-1933024

    Let me know πŸ™‚

    #1933059
    ammgbr

    Still does not work

    I want the off canvas menu to appear on mobile only. On desktop view I only want the primary navigation menu – apologies I should have clarified that earlier

    I managed the second part – removed the ‘menu’ and only have the icon on mobile

    #1933112
    Ying
    Staff
    Customer Support

    The CSS you added is still the old one, hasn’t been updated:
    https://www.screencast.com/t/PzWdyxquTBI

    And I still don’t see this part of CSS on your site yet:

    .slideout-navigation.do-overlay .menu-item-has-children .dropdown-menu-toggle {
        border-left: none !important;
    }

    Have you cleared cache?

    #1933117
    ammgbr

    Cache cleared.

    This is all the code I have in my CSS:

    *deleted*

    #1933137
    Ying
    Staff
    Customer Support

    You are missing a } after

    div#page {
    padding-top: 50px;
    #1933139
    ammgbr

    Oh – many thanks πŸ™‚

    It works

    Re layout how could I tidy it up?

    1) The the exit icon X is in the middle of the screen just above the menu items so it is a bit distracting. Is it possible to have it on the right upper corner – would look more slick

    2) The same for the different menu items dropdown icons – could they be on the far right side, all aligned at the same level?

    3) When selecting each menu item the background changes to green but partially – could the whole row change colour to green when the menu item is selected?

    The arrangement a bit like the mobile version of the ft.com menu

    Apologies for the requests – these are small things but would massively improve the navigation layout

    #1933146
    Ying
    Staff
    Customer Support

    Try this CSS:

    .slideout-navigation.do-overlay .slideout-exit {
        justify-content: flex-end;
        display: flex;
        width: 100%;
    }
    
    .slideout-navigation.main-navigation .main-nav ul li a {
        display: flex;
        justify-content: space-between;
    }
    #1933377
    ammgbr

    Thank you that works πŸ™‚

    #1934011
    Ying
    Staff
    Customer Support

    No problem πŸ™‚

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