Forum Replies Created
-
AuthorPosts
-
November 12, 2015 at 6:06 pm in reply to: Submenu items in mobile menu re-alignment (part 2) #534943
We have fixed it ourselves. If you are interested the code now looks like this:
/* 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; } #menu-item-755 .menu-item {position: static;} .avia_mega_div {display: block !important; opacity: 1 !important;} #menu-item-755 .avia_mega_div { left: -300px !important; right: auto !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; } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 989px) { #menu-item-755 .avia_mega_div { right: auto !important; left: 0 !important; } }
November 12, 2015 at 10:01 am in reply to: Submenu items in mobile menu re-alignment (part 2) #534637Hi, we have checked on Apple Ipads, Iphones and Samsung devices and the Portrait version of sub menu (mega menu) for “Motocikli” does not work properly (is not even seen) anywhere, only the landscape is. I have also run it through browserstack several times through live interactive testing and it seems to have the same problem and all devices. “Oprema” works fine because it is an ordinary submenu, but the “Motocikli” submenu is actually a mega menu and you can’t even see the sub menu items, because they are to far on the right (out fo the visual field for mobile) If you put the device in landscape you can see them.
I am pasting again the code I have in custom.css which has worked before, but now it does not again:
/* 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; } } /* 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: 480px) and (max-width: 767px) { #menu-item-755 > .avia_mega_div { right: 0px !important; } } /* 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 (min-width: 480px) and (max-width: 767px) { #menu-item-755 > .avia_mega_div { right: 0px !important; } }
- This reply was modified 9 years, 1 month ago by votan.
It works. Thank you very very much.
Hi, 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.
I 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.
Sorry, guys, is it possible to get an anwser today? I would be really thnkful.
December 10, 2014 at 1:20 pm in reply to: Main Menu (primary menu) customization (2 requests) #365933Thnx very much for all the tips. Can you help me move the mega menu to the right place. (in regards to main menu 310 px to the left)
You get the mega menu when you click “Motorji” on http://www.ducati.si
Here’s The screenhot how it looks now: https://www.dropbox.com/s/42jidgo6ns04xce/Screenshot%202014-12-10%2012.18.47.png?dl=0Please help how to move the mega menu to the right place using custom.css
Thx. The thing is we need to give the API code for upgrades in “Your Themeforest API Key” in WordPress /Enfold option in the other website, too. We have already used the API code we have in votan username in themeforest. Can we just generate another API code? How will the theme know which one is for which site? Please advise.
-
AuthorPosts