-
AuthorPosts
-
April 22, 2015 at 1:39 pm #432747
1) Can we make the mobile menu show on all screen sizes?
2) Can we add the word ‘menu” to the icon?
3) The current mobile menu slideout takes up the whole page (when you click on mobile menu icon) Can we adjust it so it only takes up 1/2 to 1/3 of page so you can still see page content?
Thanks!
April 23, 2015 at 7:27 am #433270Hi Simplify!
Thank you for using Enfold.
Add this in the Quick CSS field:
@media only screen and (max-width: 2600px) { .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide { display: block; } .responsive .av_mobile_menu_tablet .main_menu { display: none; } .html_mobile_menu_tablet #mobile-advanced { display: block; width: 20%; right: -20%; }}
Make sure that you set the Header Mobile Menu activation setting to the second option.
Regards,
IsmaelApril 23, 2015 at 1:02 pm #433424thanks for the help. It’s okay on Desktop but on mobile only 1/4 left part of the nav is visible.
April 23, 2015 at 1:04 pm #433426April 23, 2015 at 1:24 pm #433445This reply has been marked as private.April 23, 2015 at 1:29 pm #433449Hey!
Please add following code to Quick CSS as well
@media only screen and (max-width: 990px) { .html_mobile_menu_tablet #mobile-advanced { display: block; width: 100% !important; right: -100% !important; }}
Best regards,
YigitOctober 13, 2015 at 7:19 pm #518297Hello !
It works for me but I’d like my website to be with a boxed layout. With this code, the menu can be seen in small on the upper right corner of the page – and when I open and close it it then disappear.
Here’s my website, i’m still changing it every two minutes but maybe it’ll help you : delepinay.fr
Thanks !
October 14, 2015 at 7:49 am #518515Hi,
Could you post a screenshot highlighting your problem please? I couldn’t find anything obviously wrong on your page. Next time please open a new thread for your problem as old threads tend to get messy and it gets harder for the moderators to help you out.
Regards,
RikardOctober 14, 2015 at 9:05 am #518536Hello,
Soory I removed the boxed layout after some time because my website is still online with visitors. Here’s a screenshot of the problem :
http://delepinay.fr/wp-content/uploads/2015/10/Capture.jpgWhen I click on the button menu it comes and then when I quit it it disappears : how can I make it invisible from the beginning ?
Thanks !
October 15, 2015 at 5:51 am #519044Hi,
You are running an old version of the theme (3.0.4), please update to the latest version (3.3.2) and your problem should go away.
Thanks,
RikardOctober 16, 2015 at 3:05 am #519645Hello ! Thank you for your answer !
I updated the theme -I’ll be careful about that next time ! – but it looks like it just moved the problem :
now on all small device like ipad it’s not good, the menu is visible at the beginning (http://delepinay.fr/wp-content/uploads/2015/10/Capture2.jpg) (the menu seems to “create” a space on the right at the beginning, but when you open and close it it disappears. (can reproduce that on Chrome “inspect” ctrl+shift+I)Another point, about the ergonomy with the boxed layout, before the update, the menu was coming from the border of the central part and it was nice, and now it’s coming from the border of the screen : it’s a bit strange and makes the “close” button of the menu be far away from the “open” one. Here’s a screenshot with some beautiful drawings to explain : http://delepinay.fr/wp-content/uploads/2015/10/Capture3.jpg
Hope you’ll find why this is happening with the boxed layout !
Bye
Guilhem
http://delepinay.frOctober 19, 2015 at 2:10 pm #520932Hi,
About your first remark, that would take a lot of customisation and is out of theme support unfortunately. About both your remarks; it’s the default behaviour, I’m not really sure what changes you would like to make though?
Regards,
RikardApril 19, 2016 at 1:04 pm #617363Hi guys, sorry for bringing up an old post but it is directly related to this one, I have added the above CSS to show mobile menu on desktop up to 3500px when using main enfold theme, however I have just moved to the child-enfold and the above css stops working and shows default menu style is there anything different to add to css when using child theme to get this to work?
Also I’m having the same problem as above where the menu is showing expanded off the page to the right and makes the page wider (out of sight) which if you slide your courser to the right you will see a smaller version of the pop-out mobile menu (see screen shot) link to DEV site in private content
Thank you, favourite theme hands down!
April 19, 2016 at 1:37 pm #617383Hey!
Not sure if you are currently using a child theme but we do see a horizontal menu above 3500px as per your description. Please see the attached screenshot. Please refresh the browser cache and review the site again.
First press F12 to open the Chrome Dev Tools then hold down Ctrl and click on the Reload button.
Overall the menu looks fine when the mobile menu is is active state as well If this is not what you notice on your browser please open a new ticket and share a screenshot of the issue and the browser details.
You may have already noticed this one in Enfold > Import/Export > you can easily import the main theme settings to child theme :)
Regards,
Vinay- This reply was modified 8 years, 8 months ago by Vinay.
April 20, 2016 at 7:27 am #618024Hi Vinnie, no I left the main Enfold theme live so you could see the issue with the small menu hiding to the right of the page when you scroll side ways on the page. As mentioned the menu using the same CSS doesn’t work on child theme, I will now change it over to the child so you can see so please revisit the domain i sent you earlier. As I mentioned the menu looks fine however if you look closely the page will be wider than the screen your looking at it on and you will see a small version of the explanded menu hiding off to the right of the screen as per my screen shot. I have copied all the settings identical to the child theme with the menu not showing as mobile at all on desktops
April 20, 2016 at 7:32 am #618028Can I also add that the little menu off to the right of the page only shows until the menu has been expanded by click the menu icon, if you click this prior then you will not see the fault and need to refresh the page another screen shot attached.
April 22, 2016 at 11:45 am #619786Hey!
try this code in Quick CSS field:
ul#mobile-advanced { width: 60%; }
and adjust as needed.
Best regards,
AndyApril 26, 2016 at 3:10 am #621820Hi Andy
Thanks for sending the CSS, that makes it work great on desktop but on mobile only makes about 1/3rd of the menu show, see screen shot link in private
Thank you
April 28, 2016 at 12:39 pm #623646Hey!
then add some media queries, so my code from above will work on specific screen sizes only. Something like this:
@media only screen and (min-width: 768px) { ul#mobile-advanced { width: 100%; }}
Adjust it as needed.
Best regards,
AndyJune 1, 2016 at 2:43 am #641137Hi!
I’ve added in this code and the mobile menu works, but now the transparent, glassy header is not loading correctly as it’s showing just white bar. Is there a fix for this?
Also, want to center logo on desktop and mobile. Centering with theme options adds the bar below main nav which would normally hold the navigation options.
Thank you.
-
AuthorPosts
- The topic ‘mobile menu for desktop and adjustments’ is closed to new replies.