Hi navyspitfire,
There isn’t a setting for that, you’d need to change the width and transform distance via custom CSS to accomplish that
Best,
Chris
I got pro version assuming that changing menu width would be in there, it seems like a basic thing? Is it in there? I need to make my menu wider. Can’t find any sort of menu width setting…
If CSS required would appreciate a tip on what the CSS selector is and perhaps a few settings?
Thanks, MTN
Hi mountainguy2,
There isn’t a setting for that, sorry. The plugin handles resizing the menu for various viewport widths. If you set a single width, it would not work properly. If you want to adjust the menu width it’s not a simple thing – you need to change the menu width, the transformation distance for the menu, as well as for the body and the toggle bar.
If you have any further questions, please Submit a Ticket for Pro support – this forum is for the free version only
Best,
Chris
Super answer Author, thanks. I’ll look at other easier design options first.
Apologies for using this forum for pro version. Interesting how one pays for software then has to undergo the inconvinicne of logging into multiple support websites for each purchase, while those who use free versions can just hang out on WordPress.org and bounce around to different forums for free support.
That said, I tried some different mobile menu systems and yours is the best so far. Thanks for your work.
Back to the subject: The menu ends up too narrow for my taste. It would perhaps be nice in later versions of Shiftnav to at least have a couple of width options, like “standard, wide, narrow.”
MTN
You’re welcome
There’s no need to log into anything, you just submit a ticket through the form. The ticket system is far better than this forum, collecting relevant information and allowing me to provide superior support than I ever could here. In fact, if you enter the information in your plugin settings and then simply click the “Support” button in the upper-right of the Control Panel, it’ll pre-fill everything for you so all you need to do is type out your question – no need to search for the right forum on wordpress.org. It also allows for private communication, as public forums are not useful when sensitive data needs to be exchanged. Moreover, pro customers receive support constantly, while I only check these forums when I have the time – this is especially true currently while I am on vacation – I have been checking in with support tickets daily, while I simply don’t have the time to check these forums as regularly.
Glad you’re enjoying the plugin, perhaps the ability to set a width above a certain breakpoint would be useful so that it doesn’t break things on mobile.
Chris
Just had to do this for a client and couldn’t find an answer anywhere but figured out it is only a couple of CSS lines.
Just add the following to your themes CSS (replace 200px with width of your choice):-
.shiftnav {
width: 200px;
}
.shiftnav-open.shiftnav-open-right #shiftnav-toggle-main, .shiftnav-open.shiftnav-open-right .shiftnav-wrap, .shiftnav-open.shiftnav-open-right>.shiftnav-fixed-right {
-webkit-transform: translateX(-200px);
-moz-transform: translateX(-200px);
-ms-transform: translateX(-200px);
-o-transform: translateX(-200px);
transform: translateX(-200px);
}
Hope this helps.
The above is for when the menu opens from the right.. When it opens from the left it would be:-
.shiftnav {
width: 200px;
}
.shiftnav-open.shiftnav-open-left #shiftnav-toggle-main, .shiftnav-open.shiftnav-open-left .shiftnav-wrap, .shiftnav-open.shiftnav-open-left>.shiftnav-fixed-left {
-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-ms-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
Thanks for sharing, ksmales23 🙂 Do keep in mind that the width varies depending on the viewport width to accommodate multiple mobile device sizes, and the elements that are shifted change depending on your configuration (so there may be many permutations for other users). But as long as you’re overriding them all and your width is smaller than the smallest viewport width (which it appears to be here), your solution should work for your specific settings 🙂
