Tagged: mobile menu
-
AuthorPosts
-
September 3, 2015 at 8:38 pm #497986
Hi, it seems that at one point our mobile menu collapsed. It is all ok with the main menu items (see items Motocikli, Oprema, Servis, cenik, Zgodovina in the screenshot), but the subitems and subsubitems are too far on the right side. These are the subitems for Motocikli. (see subitems Diavel, Diavel Carbon, etc on the right side of screenshot.
We wold reallz like to put them back on the left side and not mess up with the desktop menu at the same time.
Can you help us with the solution?
I am attaching a screenshot for this issue: https://www.dropbox.com/s/ydk6bq9goxs3rxh/Diavel%20Dark%20%7C%20Ducati%20Slovenija%202015-09-03%2020-26-43.png?dl=0September 4, 2015 at 5:05 pm #498499Sorry, guys, is it possible to get an anwser today? I would be really thnkful.
September 4, 2015 at 9:42 pm #498615I have been digging into this problem of ours a little bit more and I was able to find that we added a special line of css code in custom.css when we first customized the mega menu on desktop version of main menu.
This line of code goes like this:} #menu-item-755 > .avia_mega_div { right: -850px !important; }
As I said this code impacts the desktop mega menu the way we wanted, but the mobile menu now folds to far to the right.
Is there a solution to separate the code for desktop and mobile view?
How could we do that?Attaching a screenshot of mobile menu again. We would like to put the submenu in mega mnu on mobile back to the left and not impact the desktop mega menu position at the same time. If we adjust the -850 value now it impact both menus (desktop and mobile)
Please help.
- This reply was modified 9 years, 3 months ago by votan.
September 7, 2015 at 4:43 am #499006Hi,
Please try the following in Quick CSS under Enfold–>General Styling:
@media only screen and (min-width: 480px) and (max-width: 767px) { #menu-item-755 > .avia_mega_div { right: 0px !important !important; } }
Please not that your thread will be sent to the back of our queue if you reply to it yourself.
Thanks,
RikardSeptember 7, 2015 at 6:53 pm #499483Hi, thank you very much for your anwser. I didn’t realize about the queue. Thanks for the info.
I have implemented the code as you wrote but it does not work. I have put in like this. This is how my custom.css file looks like now. What have I done wrong? Please advise./* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */ /* General Custom CSS */ .main_menu { right: auto !important; left: 310px !important; } .main_menu > div > ul > li > a > .avia-menu-text { color: #f8f8f8; font-weight: normal; font-size: 16px; text-shadow: 0 2px 2px #000000; !important; } #menu-item-755 > .avia_mega_div { right: -850px !important; } #header .mega_menu_title { font-weight: normal; color: #f9f9f9; font-size: 18px; !important; } .main_menu .sub-menu > li > a > .avia-menu-text { font-weight: normal; color: #d0d0d0; font-size: 14px; !important; } @media only screen and (min-width: 480px) and (max-width: 767px) { #menu-item-755 > .avia_mega_div { right: 0px !important !important; } } /* Desktop Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the desktop view of your site */ @media only screen and (min-width: 768px) { /* Add your Desktop Styles here */ } /* Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ }
Looking forward to your reply.
September 7, 2015 at 11:20 pm #499582Hey!
Please remove extra “!important; ” in your code and Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
If that does not help, please create a temporary admin login and post it here privately so we can look into it.Regards,
YigitSeptember 8, 2015 at 4:51 am #499644It works. Thank you very very much.
September 8, 2015 at 1:28 pm #499834Hi!
You are welcome, we are always happy to help!
For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)Cheers!
Yigit -
AuthorPosts
- The topic ‘Submenu items in mobile menu re-alignment’ is closed to new replies.