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

[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.

[Elvin]

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)

[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.

[David]

Hi there,

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

[Yogesh]

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

[David]

Add this CSS:

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

[Yogesh]

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

[David]

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 ?

[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.

[David]

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

[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

[David]

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

[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.

[Ying]

Hi Yogesh,

No worries, give this CSS a try:

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

[Yogesh]

Thank you. Problem solved. Closing topic.

[Author]

Posts