Resonsive Menu Panel Width

Resolved nixiemartyn
(@nixiemartyn)

9 years, 4 months ago

Hi!

Awesome plugin, keep up the good work!

I noticed that when using a pixel value for the menu panel instead of a percentage value, the menu is not responsive for values less than the pixel width defined.

For instance, if I want to use 450 pixel width for my menu it works fine until the screen size is less than 450 pixels wide – for instance on an Iphone5 (Which has 320 pixels width).

If it would be possible to set a percentage of 100 percent to kick in at 450 pixel width or less that would be great.

Of course it would be possible to set the pixel width to 320, but some of my menu navigation items have quite a few words and need a panel width of 450 to not cut off mid sentence.

Thank you for your help!

Nixie

Viewing 6 replies - 1 through 6 (of 6 total)

Thread Starter nixiemartyn
(@nixiemartyn)

9 years, 4 months ago

For this mobile menu I am using the right menu panel.
Plugin Author Rui Guerreiro
(@takanakui)

9 years, 4 months ago
Hi,

Can you try this css. The maximum is 90% so you can click in the closing menu icon.
```
@media only screen and (max-width: 450px) {
  .mob-menu-right-panel {
    width: 90%!important;
    -webkit-transform: translateX(-90%)!important;
    -moz-transform: translateX(-90%)!important;
    -ms-transform: translateX(-90%)!important;
    -o-transform: translateX(-90%)!important;
    transform: translateX(-90%)!important;
  }
}
```
Let me know if it worked.

-Takanakui
Thread Starter nixiemartyn
(@nixiemartyn)

9 years, 4 months ago

Hi Takanakui!

Using this code, what happens is that at the specified max-width (450px) an additional menu appears and overlays on the other side of the screen – therefore making the navigation unusable because it breaks the site on this screen size:

Clicking the hamburger icon moves the content to the left:

Is there a way to disable mobile menu at a specified max-width? For instance, use mobile menu at the range of 450px -2000px. For screen sizes less than 450 the Genesis navigation will kick in. I noticed this plugin disables the default Genesis responsive menu.

I know this might be the opposite of the intended use for this plugin, but it would suit my purpose if it did.

I tried this code, but it didn’t work:

@media only screen and (max-width: 450px) {
.show-nav-right .mobmenu-push-wrap, .show-nav-right .mob_menu_header_div {
display: none;
}
}

Thank you for our help!
Plugin Author Rui Guerreiro
(@takanakui)

9 years, 4 months ago
Just try to clear the browser cache and test again since with my code the panel should occupy 90% of the screen and it doesn’t seem to be happening.

Regarding your code, guess it’s just missing the !important tag.
Try this one
```
@media only screen and (max-width: 450px) {
.show-nav-right .mobmenu-push-wrap, .show-nav-right .mob_menu_header_div {
display: none!important;
}
}
```
-Takanakui
Thread Starter nixiemartyn
(@nixiemartyn)

9 years, 4 months ago

Hi again!

I’ve tried the code on two sites built with the Genesis Framework + Dynamik. Whenever I put in your code with the “width: 90%!important;”, an additional menu appears on the opposite side of the screen.

The code with the “display: none!important;” only removes the hamburger menu icon, not the menu itself. The hamburger icon is there until I click on it and the mobile menu pans in from the right.

I tried removing all other css from the sites. There might be an issue with the Genesis Framework + Dynamik?

Plugin Author Rui Guerreiro
(@takanakui)

9 years, 4 months ago

So we can discuss this further, can you send me an email to takanakui at gmail dot com

thanks

-Takanakui

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Resonsive Menu Panel Width’ is closed to new replies.

Tags