-
Posts
-
HI
I am trying to get my mobile menu to look right on the site below, but there is something wrong with the line-height or vertical spacing on the top items. There is too much spacing on the landing menu items and the arrows don’t line up correctly on the submenus. I have tried various css and maybe there is some conflict but I can’t find it. Same on all browsers for me.
see: https://imgur.com/a/dON5dvVI’d also like to change the styling on the menu item titles – so I can take the bold off the “roundtrips” etc. and change the color of the titles, and hide the little “-” beside the submenu items. When I make changes I can see them on the mobile inspect tool but the changes don’t take on my own mobile (have cleared the cache, etc, many times).
I have read through other threads about having a different menu on the mobile but understand it has to be done through css classes on each menu item and a display: none css. I thought that I used to have a different menu set automatically (choosing my main-menu-mobile menu) but can’t remember where that was set. I am now having a glitch where sometimes it’s the main menu and sometimes it’s the mobile menu that shows, though I don’t know where the settings are coming from. My client is seeing the mobile menu on the landing page, and the main menu on all other pages. Not sure what is happening – Can you take a look?
thanks for your help!
NancyHey Munford,
Sorry for the late reply,
I have tested your mobile menu in Chrome, Firefox, Edge, IE11 & Android and I couldn’t recreate the errors in your screenshots, but if you are seeing these errors in the iPhone, I can ask another team member to look for you.It looks like your mobile menu is swapped by this function in your child theme functions.php:
/*add new mobile menu swap*/ function av_different_mobile_menu( $args = '' ) { if(wp_is_mobile() && $args['menu_id'] == 'avia-menu') { $args['menu'] = 'main-menu-mobile'; } return $args; } add_filter( 'wp_nav_menu_args', 'av_different_mobile_menu' );so the “main-menu-mobile” menu would be your mobile menu, the problem is that this function doesn’t determine what is “mobile” by screen size, it only returns the HTTP_USER_AGENT which is unreliable (more)
My own tests shows that my desktop chrome in developer mode sends the “mobile” agent, but my Android chrome doesn’t. Firefox and Edge both don’t send the right user agent.
A more reliable solution would be to have one menu and hide menu items based on screen width
Or to write a more complex function that replaces the “wp_is_mobile” with a function that gets the screen width, I had hoped to give you that here, but I didn’t find it within a reasonable amount of time.
Please consider using the linked solution above.To remove the bold text on the menu items such as “roundtrips”, please remove the “strong” tags from the menu titles.
Best regards,
MikeHi MIke
Thanks for your reply. I knew I had that code somewhere but missed it down at the bottom of the functions. I have already set up the menu to show/hide items, it’s just a bit confusing with such a big menu.
Regarding the menu items font styling – is there a way to target just those coloumn titles that I put tags on?best
nancyHi,
With css we can target the maga menu titles so you won’t need to add tags to the menu titles, which can cause errors.
Here is an example:.avia_mega_div span.mega_menu_title a { color: red !important; font-weight: bolder !important; }I made the color red so you can see what it effects. Please note that the mobile menu doesn’t have the same classes, but we can still address the menu with css.
Let us know once you have removed the tags, and have setup your mobile menu with the items that will show, then make a list of menu styling that you would like.Best regards,
Mike
- You must be logged in to reply to this topic.