-
Posts
-
I have hid the top menu on my site pages and instead use a full-width sub menu (Top NAV menu) just under the full width slider images, EXCEPT for the blog post pages – those page a similar looking menu that appears without me having to manually add it. However, I just realized a BIG problem – that top menu on the blog posts pages is NOT turning to burger on smaller screens.
With some help from the team here, I’ve had to make quite a few customizations to the menus on my site, most of which are in Quick CSS. There are especially some customizations/differences between the header/menus in a page vs. a blog post. For example, in order for additions to the drop down menu to show up on BLOG POSTS, for some reason I have to add them manually in the functions.php file.
I am seeking help in getting code or a correction to the existing css to make the BLOG POST top navigation menu (different from pages menu where the menu is hidden and I use a Full-With Sub Menu) to shrink to burger where appropriate, when there is absolutely not room.
Here’s a past post that touched on some related menu customizations in case it helps for a little reference – https://kriesi.at/support/topic/change-font-size-in-full-width-sub-menu/
I’ll add site info. below, thanks!Hello Kriesi Team,
I just renewed my support for another six months, so am bumping this up and looking forward to getting a reply to my question (above) soon so I can move forward.
Thanks so much!Hi Moondreamer21,
You have a lot of code hardcoded in the header.php file in your child theme, why is it there? The submenu is in that file?
Best regards,
VictoriaOff of the top of my head, I don’t remember why we did it that way (I had a lot of help with the Kriesi team on this before). I don’t want to make changes to the 6 months of customizations that were done to get it to look and work the way it does.
I just need for the burger menu to work on actual blog post pages with my current set-up. Was hoping to get some code that would accomplish that?
Thanks!Hi,
Add this to quick css:
#top.post-template-default.single.single-post .av-burger-menu-main { display: block !important; }Best regards,
Jordan ShannonI appreciate it Jordan, except that didn’t work.
I’ll post a link (again) to an example post page. When I minimize it on my laptop or check it on mobile, it’s still not showing a burger menu – the actual blog post pages still have the top menu that runs down/overlaps on the page.
I want to fix this, so that on BLOG POSTS it also turns to a burger on mobile (or smaller screen) like the other pages… but I don’t want to mess with/change the existing CSS or coding of the current menus in general if possible (they are kind of complicated, but I remember there were reasons why we set everything up like it is).
Thanks!Hi,
Sorry for the late reply and thanks for the explanation, I checked your site on mobile and with Chrome dev tools and see that your burger icon is a light gray which is hard to see, and when it is open your menu is transparent.
Please see the screenshot in Private Content area.
Please check on your device, I assume that if we change your burger icon to white it will be easier to see, what color would you like the fly-out mobile menu background to be?Best regards,
MikeI see what you mean Mike!
I would like the mobile / smaller screen burger menu for those blog post pages to look exactly like they do for a regular page on the site. You can click on any link (other than one to an actual post) and see an example of what it looks like… how can we get that look on the blog posts pages?
Thanks!
Hi,
Sorry for the late reply, I see that your pages has a different menu style than your posts, but I don’t recall how we did that, even after reviewing your custom code and I’m a little weary of taking everything apart.
Another option would be to add the brown background color to the menu that is transparent right now?Best regards,
MikeIt’s important that the mobile menu works and looks the same on the blog post pages as on the rest of the site.
I would greatly appreciate a careful look at how things are set up and customized so we can accomplish this for the blog posts.
Please see the original post and all those in this thread… I’m thinking it wouldn’t require taking apart but perhaps just some specific CSS?
Thanks!Hi,
Ok, I have sorted it out, you see your blog posts menu is a copy of your full-width sub-menu that is injected via your child theme functions.php, after carefully comparing the code I found it was missing the class “av-switch-768”. It is now working as expected.
Please clear your browser cache and check.Best regards,
MikeThanks so much Mike! And I appreciate you clarifying just how it was set up so I understand that for future reference. I know this required some careful troubleshooting and I appreciate it so much!
While we’re on this topic – I had a question about how the drop down in the mobile menu works. It seems that when I tap a link that has a drop down, the drop down flashes for a second but I’m immediately taken to the page that is at the top of the drop down. Is there a way to tap that, and just have the drop down menu appear (and have the option to choose from all those links)… without being immediately taken to the top page?
However, I see that when I’m ON the ‘About Page’ on mobile for example, that I can tap ABOUT in the menu and the two drop downs will appear… and the same goes for other pages… If I’m ON the actual page, and click on the link for that page (if it has a dropdown), it will show up and allow me to choose, but not while I’m on other pages.
Hope that makes sense, can you try it and see? I would like people to have the chance to choose from the variety of drop downs on mobile from any page.
Thanks again for all your help – you really go above & beyond, it’s SO appreciated!Hi,
I tried to reproduce this error on my localhost but couldn’t, but in my tests, I realized that when it is working correctly you lose the ability to use the parent page in mobile, and since every menu item has the arrow next to it its hard to tell which ones have children.
I would recommend unchecking the option “Hide mobile menu sub-menu items” so that people can see the option and perhaps entice them to explore more of your pages, and allow you to keep using the parent pages.
What do you think?
Thanks for the kind words :)Best regards,
MikeThank you Mike! I see that I would have to change that setting individually for every single page, correct? And since you understand how the menus are set up differently for blog posts – how can I set this the same for those as well?
Hi,
Unfortunately, you will have to go to each page, but for the posts that use the functions.php code, I corrected that for you by removing the classav-submenu-hiddenfrom the shortcode.Best regards,
MikeThanks so much Mike!
One more question regarding this topic – can you explain how I would go about taking away or adding the little sideways triangle bullet point next to each mobile menu link? I think I only want those to show on the menus that have drop downs, but I’d want to set it that way and view it before deciding for sure.
Can you explain how I can edit that both for the blog post mobile menu and on the page?
Your expert help is SO appreciated. :)Hi,
To remove the triangles from the menu, please add this css:@media only screen and (max-width: 767px){ .responsive #top .av-switch-768 .av-menu-mobile-active .av-subnav-menu > li a:before { display: none !important; } }To only have the triangles next to parent items use this css instead:
@media only screen and (max-width: 767px){ .responsive #top .av-switch-768 .av-menu-mobile-active .av-subnav-menu > li:not(.menu-item-has-children) a:before,.responsive #top .av-switch-768 .av-menu-mobile-active .av-subnav-menu > li ul li a:before { display: none !important; } }For some reason the blog menu which is created with the code in your functions.php was missing the class “menu-item-has-children” for the parent items, so the css above was not working correctly, so I added the class.
After applying the above css, Please clear your browser cache and check.Best regards,
MikeShannon, if it’s OK I’d like to leave it open a while longer JUST TO MAKE SURE I don’t need more help on this topic. Thanks!
Hello again,
Now I’ve run into an issue with menus on mobile not showing up as a burger on the courses, modules, lessons and topics, quizes, etc. that I’ve set up in LearnDash.
I’ll post a link in the PC as an example of what I’m seeing.
Also if you look close at the purple “Take this Course” button, there is “Or Login” text that is overlapping it.
Would like some CSS to prevent this?
Thanks!Hi,
Sorry, I’m getting “Whoopsie Daisy! Page Not Found” for your link, please check.Best regards,
MikeHi,
Thank you, the reason the burger menu is not showing is this code:#top .av-burger-menu-main { /*to not display magnifying glass on desktop*/ display: none !important; }So I disabled this and now the burger shows and I checked your homepage and I still don’t see the magnifying glass on desktop.
Perhaps this was an error? Please clear your browser cache and check.
If you find a magnifying glass on desktop that you want to be removed we can help.Best regards,
MikeHi Mike, thanks for your help!
After that change, the menu on the courses pages still looks the same other than there is now three grey lines in the corner where there is a “burger” (not what I want).
I’ll attach a screenshot of what it should look like (a white burger in the center of the red bar), and what it looks like now.
The magnifying glass is fine, I believe that’s the search bar.
There is a lot of menu code in my functions.php file… and some customizing we’ve been doing for the course pages there – maybe getting this mobile menu to work involves some code there?
P.S. I also circled the “or Login” text overlap issue on mobile in the screenshot (see PC).
Thanks!Hi,
Ok, thanks for the feedback and screenshots, I took a look at your sub-menu code in your functions.php and found it was missing the “av-switch-768” class, I have now added.
To correct your course button I added this css:.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-action .learndash_checkout_buttons { margin: -1.5em .5em !important; } .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-action .learndash_checkout_buttons > div > div > form { margin-top: 1em !important; }Please clear your browser cache and check.
Best regards,
MikeWait, just a moment… I found a potential issue…
I just realized that a new link I had added to the menu yesterday in the functions.php file (in the afternoon) had disappeared.
I have multiple things going on and changes being made… were you editing the most recent (current version) of the functions.php file last night to make this fix?
I just added that link back.
I want to make sure there weren’t other changes that were lost, since there are a couple other threads going here where I’m getting support with adjustments to this file?Hi,
I’m not sure how that could have happened, I found that you have 2 different menus in your functions.php, and I added the “av-switch-768” class to the second on to make it work correctly, now they both have this class, perhaps you had added your new link to only one of them? I’m glad you were able to add the link back.Best regards,
Mike
- You must be logged in to reply to this topic.