Before you ask please READ THIS

Submenu Icon on mobile view

in FatMoon Posts: 293
Hi Air
Back with submenu issues...
I can live with having to use icons for the submenu dropdown but unfortunately on mobile view the icon is not next the the Manu name but all the way on the right side causing the user to oversee the icon and thus the submenu (see screenshot) .. is there a way to have the icon next to the text as in the desktop version?
Thanks, Pascal

Comments

  • AirAir
    Posts: 10,970
    Hey :-)

    Don't you want to make whole menu link opening submenu as I have explained in your last topic?

    With kind regards.
  • Posts: 293
    That was the plan.. but your explanation why I should NOT do it made sense (and I follow good advice :)) so I figured I'd stick with you presets but then I saw the "off grid" arrow in the mobile view..
    But I'm open to any solution looking good a being user friendly ;)
    Thanks, Pascal
  • AirAir
    Posts: 10,970
    Hello:-)
    FLYART said: That was the plan.. but your explanation why I should NOT do it made sense
    I think there was some misunderstanding as this is totally valid parctice to make whole menu item opening a submenu.

    I mean this option https://rifetheme.com/help/docs/basic-setup/menus/menu-enhancements/#making-menu-item-not-clickable

    With kind regards.
  • Posts: 293
    Mhhh.. yes we do seem to have a misunderstanding :)
    But as we actually do have a page "show" it makes sense to keep it just using the arrow?
    As for the "not clickable" I do not have any use for that ;)
    I think for now I'm happy if I can have the "arrow" for the submenu close to the submenu text in mobile view...
    Thanks, Pascal
  • AirAir
    Posts: 10,970
    Could you send me a link to website where you want this change?

    With kind regards.
  • AirAir
    Posts: 10,970
    Please use such custom CSS:
    @media only screen and (max-width: 1024px) {
    	.top-menu li.menu-parent-item a{
    		display: inline-block;
    	}
    	.top-menu i.sub-mark {
    		display: inline-block;
    		position: relative;
    		top: 5px;
    	}
    }
    It should be close to what you want. Hopefully, I have not missed anything.

    With kind regards.
  • Posts: 293
    Hi Air

    Thanks.. it close indeed. But since the menu is centered it now as shiftet to the left while also bringing the arrow closer... it would be nice if the menu text remeins centered (to align with those menus not having submenus) while the arrow come (even) closer

    The link is here: https://zd.teamswitzerland.com
    Screenshot shows what I mean .. hopefully ;)
    IMG_0620.JPG
    1242 x 2208 - 387K
  • AirAir
    Posts: 10,970
    Hey :-)

    I thought it was impossible due to positioning way, but I have found a way :-)

    Please use this custom CSS instead:
    @media only screen and (max-width: 1024px) {
    	.top-menu li.menu-parent-item a{
    		display: inline-block;
    	}
    	.top-menu i.sub-mark {
    		display: inline-block;
    		position: relative;
    		top: 5px;
    		margin-right: -26px;
    	}
    }

    With kind regards.
  • edited August 2019 Posts: 293
    Hey Air

    Thanks! You're the man!
    I changed the code a little to suit my needs even better (the arrow was still too far way for me :))
    @media only screen and (max-width: 1024px) {
    	.top-menu li.menu-parent-item a{
    		display: inline-block;
    	}
    	.top-menu i.sub-mark {
    		display: inline-block;
    		position: relative;
    		top: 9px;
    		left: -60px;
    		margin-right: -28px;
    	}
    }
    Thanks again!
    Cheers, Pascal
    Post edited by Air on
  • Posts: 293
    Hi again Air

    Something changed? The code you gave to place the arrow closer to the submenus in mobile view are now tottally offset instead of being next to the menu item as on desktop.. how can I change this again? (see screenshot (desktop simulatiing mobile.. but same happens on the actual mobiles)
    Thanks, Pascal
    Bildschirmfoto 2019-09-06 um 10.11.12.png
    876 x 380 - 66K
  • AirAir
    Posts: 10,970
    Hey:-)

    It seems you have disabled "submenu parents" being normal links.

    Please try this custom CSS instead:
    @media only screen and (max-width: 1024px) {
    	.top-menu li.menu-parent-item a,
    	.top-menu li.menu-parent-item span.title{
    		display: inline-block;
    	}
    	.top-menu i.sub-mark {
    		display: inline-block;
    		position: relative;
    		top: 9px;
    		left: -60px;
    		margin-right: -28px;
    	}
    }
    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!