Okay
  Public Ticket #969185
Off canvas menu
Closed

Comments

  • MyshaSantini started the conversation
    November 27, 2016 at 5:11pm

    Hello,

    I have 3 questions about the off canvas navigation menu:

    1. Is it possible to center the hamburger lines on the mobile view so that they are under my logo?

    --------

    2. Is it possible to get rid of the second 'x' that appears on the menu (picture attached its on the right of the home text) and just use the one that the 3 lines turn into?

    --------

    3. My Behance icon doesn't appear on the mobile menu (the link works but no icon, image attached)


    Thank you!

    -Mysha 

  •  9,573
    Tahir replied
    November 28, 2016 at 4:14pm

    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) {
    /*     move burger menu to middle */ header#top .span_9 > .slide-out-widget-area-toggle {
        right: 50% !important;
        margin-top: 30px !important;
        -ms-transform: translateX(50%);
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
    }
    /* hide the extra cross */
    #boxed #slide-out-widget-area:not(.slide-out-from-right-hover) .slide_out_area_close {
        display: none!important;
    }
}
/* fix Behance menu, its a bug and will be fixed in upcoming updates */
.fa-be:after {
    content: "\f1b4" !important;
}

    Thanks

     Salient Support Team

  • MyshaSantini replied
    November 28, 2016 at 5:24pm

    This works beautifully thank you!

    2 More questions to make this perfect! :

    1. Is it possible to have the word 'menu' above it?

    2. Is it also possible to put this in the header? When I scroll down on a mobile device the lines are overlapping the page content


    Thank you so much

    -Mysha!

  •  9,573
    Tahir replied
    November 28, 2016 at 5:31pm

    Hey Again,

    Remove the Earlier Provided css and add this instead: 

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

    /* Add menu text to hamburger */
.slide-out-widget-area-toggle a:after {
    content: "MENU";
    font-size: 18px !important;
    margin-top: -23.5px !important;
    position: absolute;
    left: -54px !important;
    color: #888888;
    text-decoration: none;
    transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -webkit-transition: color 0.2s linear;
}
@media only screen and (max-width: 1000px) and (min-width: 1px) {
    /*     move burger menu to middle */ header#top .span_9 > .slide-out-widget-area-toggle {
         position: static !important;
         
        margin-top: 40px !important;
        -ms-transform: translateX(54%);
        transform: translateX(54%);
        -webkit-transform: translateX(54%);
    }
    /* hide the extra cross */
    #boxed #slide-out-widget-area:not(.slide-out-from-right-hover) .slide_out_area_close {
        display: none!important;
    }
}
/* fix Behance menu, its a bug and will be fixed in upcoming updates */
.fa-be:after {
    content: "\f1b4" !important;
}

    Thanks


     Salient Support Team

  • MyshaSantini replied
    November 28, 2016 at 5:54pm

    Thank you so much!

    Works a treat :)