-
Posts
-
Hello,
How do I target the sub menu full width element for a drop down arrow?
For the main menu I used:
.menu li > a:after { content: ' ▾'; } .menu li > a:only-child:after { content: ''; }But that does not work for the submenu element?
Sincerely,
MortickaHey Morticka,
Can you give us the specific page/link? so we can try to inspect why your code isn’t working.
Best regards,
NikkoHi Morticka,
Thanks for giving us admin access.
I have modified this code in your Quick CSS:.menu li > a:after { content: ' ▾'; }to:
.menu li > a:after, #top .av-subnav-menu .menu-item-has-children > a:after { content: ' ▾'; }Best regards,
NikkoHi Nikko,
Great, it works, thank you! :D
One issue, the dropdown text of the menu item is not full width, part of the text is on the next line. How do I get it to be full width? I tried solutions given here: https://kriesi.at/documentation/enfold/examples-of-full-width-submenu/# but none of them work.
On mobile, I have a white area beneath the burgermenu dropdown. How do I get rid of that?
EDIT: The burgermenu on mobile (phone/tablet) is not visible. It’s supposed to be white. I tried fixing it with this code, but that worked for a moment and then it did’nt:
/*( Desktop & Tablet & phone Sub menu1 mobile menu toggle )*/ @media (min-width: 300px) and (max-width: 979px) { #sub_menu1 .mobile_menu_toggle { color: rgb(255, 255, 255) !important; } }Can you please help me?
Sincerely,
MortickaHi Morticka,
Thanks for giving us screenshots :)
For dropdown, I have added this CSS code at the top of Quick CSS:#top .av-subnav-menu > li ul { width: 240px; }As for the burger menu white space, I have added this CSS code in your media query:
#top .sticky_placeholder { display: none; }Best regards,
NikkoHi Nikko,
Thx, the dropdown text is fixed :D
But the burger menu is still not visible on mobile?
And, unfortunately the sticky placeholder problem is still there.
When you select the second tab in the tabs element on the page on mobile, you see the sticky placeholder again, menu is gone and the layout gets all screwed up. Everything above the video disappears as well.
I made a short video about the problems, it’s in the Private content.
These are a lot of responsive problems, do you know what causes it?
Sincerely,
MortickaHi Morticka,
I apologize for the delayed response, please flush out your browser cache.
I have checked it on my mobile phone and in an iPad, and the hamburger menu is showing as white and clicking on the tab doesn’t show similar behavior on both devices.Best regards,
NikkoHi Nikko,
That’s correct that the hamburger menu is white now, I fixed it myself.
The tabs issue has nothing to do with cache, my whole layout get screwed up on iphone when you press on one of the tabs. As you can clearly see on video.
Saying, just clear your cache does not solve the problem.
Is there anybody else that can help me?
Sincerely,
MortickaHi Morticka,
Can you tell us what device and browser you are using? like iphone + safari or iphone + chrome or maybe android phone + chrome, etc.
Best regards,
NikkoHi Morticka,
I’ll request for help from my colleagues since I could not see the issue on my end.
Best regards,
NikkoHi Nikko,
Thx. Is there a timeframe?
I can’t go live until this Enfold responsive issue is fixed and I would not know where to start to fix it myself :(
Please, somebody, help?
Sincerely,
MortickaHi Morticka!
Issue seems to be related to Blank page template. I edited your page and simply chose to hide header and footer under layout section and that seemed to help. Please review your website :)
Best regards,
YigitHi Yigit!
Thx for checking everything out :D
Unfortunately, when I check for instance the Course Page Test, it has the default template selected, but the problem still exists on iPhone when you switch between tabs a couple of times. (So just curious, how can the blank page be the problem? I’ve emptied my browser cache on iPhone.)
If the blank page is the problem, can’t that be fixed, instead of using a workaround? :)
Is there another solution?
Sincerely,
MortickaHi,
I added following code to bottom of Quick CSS
@media only screen and (max-width: 767px) { #top.avia-blank { display: block; } }That fixed the issue on Blank template for me. Could you please check your website once again and if there are other pages with the same issue other than page I linked in private content field, share them too? :)
Best regards,
YigitYigit, you’ve fixed it, thank you!!! Oh, I’m so relieved, thank you, thank you :))))
I checked al the linked course pages starting with the one you gave in the private section and they all work, with the blank page selected in the layout.
The only thing I just noticed that does not work also: In the hamburger menu (full width sub menu), on mobile, when you open it and you select lesson 5. with the dropdown menu, tapping 5 does not open the page. It only toggles the dropdown open and close and you can only open lesson 6.
How can I select the parent of the dropdown and open the page (lesson 5) as well on mobile? You would have to tap twice I imagine?
Sincerely,
MortickaHi,
You are welcome! Always happy to help :)
I edited your element and went to Advanced > Responsive tab and unchecked “Hide Mobile Menu Submenu Items”. It now displays submenu item by default and clicking on 5 works as expected :)
Best regards,
YigitHello,
Yes, I’ve seen that option too. But this is a demo course with 6 lessons and one dropdown. If someone has 10 lessens with 5 sub lessons/dropdowns each, you have a list of 60 lessons to scroll through on mobile. That is not userfriendly?
Do you have another solution?
Sincerely,
MortickaHi,
My JS skills are not the best therefore I am unable to provide a quick solution for that right now. However, I will check with our devs :)
Best regards,
YigitHello,
Okay, I’ll wait for their solution, hope they can solve it fast. Thx Yigit :D
Sincerely,
MortickaHey Yigit,
I was happy too soon, the problem is NOT fixed, I got new problems now!
Responsive looks better now yes, but the layout on desktop is screwed up now.
1. Full width submenu with the sticky option enabled on desktop does not work (stick) anymore.
2. I also have a grid row with a different color in the backend right beneath the (sticky) full width menu that is not visible anymore. Removing your code in quick css does not fix it.
Help please.
Sincerely,
MortickaHello, can anybody help? It’s been a week?
The code that solves the weird white area bug on mobile (iPhone), removes the sticky option on desktop and a piece of the layout (grid section) beneath the second full width sub menu.
I’m talking about this code:
#top .sticky_placeholder { display: none; }The same bug is present on two different websites. I need the full width menu to be sticky on desktop (the way it is supposed to work), the rest of my design untouched and the responsive issue on mobile (iphone) fixed as well? It’s been a week now without an answer, can anybody help?
Can you tell me how to fix this please? And I dont understand why it does not work out of the box?
Help? Anyone?
Sincerely,
MortickaHi,
Sorry for the late reply, please excuse me while I try to catch up on your thread, I believe I have found the correct page, linked in the Private Content area, I see that this:#top .sticky_placeholder { display: none; }is hiding the yellow line but I believe what you should use is this css to remove the white space above the yellow line on mobile.
@media only screen and (max-width: 987px) { #top.page-id-291 .sticky_placeholder { height: 0 !important; } }Please note that this is for the one page only, for now.
I also see that you have two sub-menus, one with a button menu, the other with a menu, so to have the first sub-menu sticky I enabled the “Sticky Submenu” option and now it is sticky at the top until you scroll, which the second sticky menu rolls over it and sticks to the top. This is the correct behavior, one sub-menu sticks to the top until the next one is scrolled to the top, please see this demo page for reference.
Please note that for testing this I disabled the “admin toolbar” in the user profile (kstm), because the toolbar covers some of the sticky sub-menu and your visitors do not see the admin toolbar.
Please see the animated gif in the Private Content area.
So I assume that this is still not quite the way you want it, please explain how you would like this to be.Best regards,
MikeHi Mike,
Fantastic, that problem is solved, thank you very much Mike! :D (I removed the page id so it now works site wide.)
Yes, I have two fw submenu’s, sorry about the confusion. I only wanted the course sub menu to be sticky, not the account area :)
The problem on mobile/iphone I have now, is when I tap the account area, the dropdown does not toggle. Does not matter if you tap anywhere else on the page, the dropdown stays open. I put an image for you in private content.
Do you know how I can fix that too?
Sincerely,
MortickaHi,
Glad to hear this helped, for the account area, the dropdown does toggle and link for my Android phone, it has a screen resolution of 360×640 but I notice that the link in the button is narrow, so this css will make it bigger and perhaps you will be able to toggle the button with your iPhone.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:#menu-item-350 > a { height: 40px; } #menu-item-350 { padding-bottom: 0px !important; }After applying the css, please clear your browser cache and check.
I took another look at your post above before submitting my reply and perhaps you meant that the menu is not closing for you, but opening fine. In that case,
Try adding this code to the end of your functions.php file in Appearance > Editor:function custom_menu_toggle(){ ?> <script> (function($){ var width = $(window).width() $(document).ready(function() { if ((width <= 768)) { $("#menu-item-350").click(function() { $("ul.av-visible-mobile-sublist").toggle(); }); } else {} }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_menu_toggle');Best regards,
MikeHi Mike,
Yes, I needed the code for the functions.php, the second one, thank you!! The website you checked out is my staging website and it worked perfectly. :D
But, when I pasted the same code in my live website, it did not work. Could you take a look at that as well?
I put the information in the private data :)
Sincerely,
MortickaHi,
Thanks for the login, on your production site the menu item has a different number#menu-item-1358, so I adjusted, please clear your browser cache and check.Best regards,
Mike
- The topic ‘DropDown arrow for sub menu fullwidth element’ is closed to new replies.