Okay
  Public Ticket #894377
Off Canvas Menu Mobile Nav Menu items
Closed

Comments

  •  2
    Silvan Falchi started the conversation

    Hi,

    I want a differtent off-canvas menu for mobile then on desktop. So I choose the option: Off Canvas Menu Mobile Nav Menu items

    But now, when I add pages to my "Top Navigation" (my mobile menu) I still see (on mobile) the regular desktop pages from the "Off-canvas menu navigation". 

    How to fix it?

    Cheers :)

  •  8,996
    Tahir replied

    Hey Silvan,

    Be sure to uncheck the Off Canvas Menu Mobile Nav Menu items [This will cause your off canvas menu to inherit any navigation items assigned in your "Top Navigation" menu location when viewing on a mobile device]

    in here : 

    Bes.t


    ThemeNectar Support Team 

  •  2
    Silvan Falchi replied

    Hi,

    When I do that.. I have a new menu on my desktop version but not on my mobile version (mobile is still the same).

    It would be great if it's possible to have an off-canvas menu in mobile ass well, with different pages in the menu (and not show these pages on desktop). 


  •  8,996
    Tahir replied

    Hey Again,

    If you want a Different Menu for Mobile . Turn off the Inherit Option and Add a Custom menu in the Off Canvas Widget Area . 

    Bes.t


    ThemeNectar Support Team 

  •  2
    Silvan Falchi replied

    Did that.. But now I've got 2 menu's on desktop and mobile as well..



  •  2
    Silvan Falchi replied

    Do you know how I can fix this?

  •  8,996
    Tahir replied

    Hey Again,

    Now make sure there is no menu selected in here : 

    And the header Inherit on Mobile Option is Turned off in Sailent Theme Options Panel -> Header Navigation Section .
    Bes.t


    ThemeNectar Support Team 

  •   Silvan Falchi replied privately
  •  8,996
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width: 1000px) and (min-width: 1px) {
        #slide-out-widget-area.fullscreen .inner .off-canvas-menu-container, #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container {
            display: none !important;
        }
    }

    Thanks




    ThemeNectar Support Team 

  •  2
    Silvan Falchi replied

    Im very sorry, but it still doesn't work :( 

  •  8,996
    Tahir replied

    Just added in additional css . 

    @media only screen and (max-width: 1000px) and (min-width: 1px) {
        #slide-out-widget-area.fullscreen .inner .off-canvas-menu-container, #slide-out-widget-area.fullscreen-alt .inner .off-canvas-menu-container {
            display: none !important;
        }
    }
    
    @media only screen and (min-width: 1000px) {
        #slide-out-widget-area.fullscreen-alt .inner .widget {
            display: none !important;
        }
    }

    Please check now. 

    Thanks


    ThemeNectar Support Team 

  •  2
    Silvan Falchi replied

    Great! Thanks :)


    Last question;

    How can I change the font for my mobile menu? 

  •  8,996
    Tahir replied

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    #slide-out-widget-area.fullscreen-alt .inner .widget.widget_nav_menu li a {
        font-size: 30px;
        line-height: 30px;
        font-family: 'Open Sans';
        font-weight: 700;
        letter-spacing: -1px;
    }

    Thanks


    ThemeNectar Support Team