[Resolved] How to increase width of off canvas menu?

Home Forums Support [Resolved] How to increase width of off canvas menu?

Home Forums Support How to increase width of off canvas menu?

  • This topic has 15 replies, 4 voices, and was last updated 1 month ago by Ying.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2040837
    Yogesh

    Hello team, thank you for creating this awesome theme.
    I want to increase width of off canvas menu in mobile & desktop. Is it possible? I mean I want to increase width of off-canvas menu in mobile which cover full screen. I just don’t want to increase width. I want that size or width of menu items may be increase according to width. Is it possible. If yes, Kindly provide code for this. Thank you.

    #2040845
    Elvin
    Staff
    Customer Support

    Hi Yogesh,

    You can try David’s CSS here
    https://generatepress.com/forums/topic/off-canvas-width-and-height-changes/#post-1842413

    Change all the 100% to the same numeric value.

    Example: 300px (or -300px for #generate-slideout-menu.main-navigation.offside--left)

    A wise man once said:
    "Have you cleared your cache?"

    #2041020
    Yogesh

    Hello thank you for your reply.

    I added following CSS to fill the viewport:

    #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);
    }
    After then, I added following CSS to adjust CSS that is adjusting its Top position ie.


    @media
    only screen and (max-width: 768px) {
    #generate-slideout-menu {
    top: 40px!important;
    z-index: 0!important;
    }
    }

    it is working fine in desktop but not in mobile. When I am clicking on hamburger menu in mobile, nothing appear. everything is black. Even normal offcanvas menu is not appearing. What I am missing? is there anything wrong in css code? I am looking for more guidance. Thank you.

    #2041071
    David
    Staff
    Customer Support

    Hi there,

    can you share a link so we can see the issue?

    #2041146
    Yogesh

    Hello David, thank you for your reply. I forget to mention website url. Please find website url in private information area.
    Thank you.

    #2041432
    David
    Staff
    Customer Support

    Add this CSS:

    #generate-slideout-menu.main-navigation.offside--left.is-open {
        z-index: 1000000 !important;
    }
    #2042231
    Yogesh

    Hello, thank you for your reply. Css code did not work sir. Please check website url in private area.

    #2042304
    David
    Staff
    Customer Support

    I no longer see the Full Width slideout ? Did you remove that other CSS?

    On that point – if you want the off canvas to cover 100% of the screen why not set it to Overlay instead of Slideout ?

    #2043418
    Yogesh

    Hello thank you for your reply. I did not remove any code from appearance>additional css.
    Presently this css is lying in my additional css area:

    /* GeneratePress Site CSS */ /* navigation letter spacing */

    .main-navigation a {
    letter-spacing: 2px;
    }

    /* button class lift on hover */

    .button, .gb-button {
    -webkit-transition: all 500ms ease-in-out !important;
    transition: all 500ms ease-in-out !important;
    }

    .button:hover, .gb-button:hover {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
    }

    /* drop cap styling */

    .has-drop-cap:not(:focus):first-letter {
    color: var(–accent);
    font-size: 3.2em;
    font-weight: 600;
    line-height: .8em;
    margin: .1em .08em 0 0;
    }

    /* image block white frames */

    .image-frame img {
    border: 12px solid #ffffff;
    }

    .image-frame-grey img {
    border: 12px solid #f2f5f7;
    }

    .image-frame-thin img {
    border: 4px solid #ffffff;
    } /* End GeneratePress Site CSS */

    .piotnetforms-container {
    flex: 1;
    }

    @media
    (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
    background-color: #4a154b;
    border: 2px solid #ffffff;
    color: #ffffff;
    line-height: 35px;
    }
    }
    #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);
    }

    @media
    only screen and (max-width: 768px) {
    #generate-slideout-menu {
           top: 80px!important;
           z-index: 0!important;
    }
    }
    #generate-slideout-menu.main-navigation.offside–left.is-open {
    z-index: 1000000 !important;
    }

    Please check if I am missing something. also I did not use overlay because in overlay, all menu items is in middle. I want all menu items on left side which is available in off canvas.
    Thank you.

    #2043505
    David
    Staff
    Customer Support

    I would suggest using the overlay method and we can provide you some CSS to align the menu items to the left.

    #2045457
    Yogesh

    How david, thank you for your reply. I have changed off canvas style option and set it to overlay. I would like to try css to align menu items to left. can you please show your css magic :D.
    Thank you

    #2045653
    David
    Staff
    Customer Support

    Your site is behind a maintenance mode page – can you share a password for that ?

    #2045916
    Yogesh

    Opps. Sorry. I forget that I was taking valuable support from you. I am sorry for inconvenience. I just deactivated maintenance mode. You can check it now. Thank you.

    #2046037
    Ying
    Staff
    Customer Support

    Hi Yogesh,

    No worries, give this CSS a try:

    #generate-slideout-menu.do-overlay .slideout-menu li {
        text-align: left;
    }
    #2053595
    Yogesh

    Thank you. Problem solved. Closing topic.

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