Before you ask please READ THIS

Submenu Icon on mobile view

in FatMoon Posts: 232
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
IMG_0614.JPG
1242 x 2208 - 804K

Comments

  • AirAir
    Posts: 9,973
    Hey :-)

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

    With kind regards.
  • Posts: 232
    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: 9,973
    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: 232
    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: 9,973
    Could you send me a link to website where you want this change?

    With kind regards.
  • AirAir
    Posts: 9,973
    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: 232
    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: 9,973
    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 14 Posts: 232
    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
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!

In this Discussion