Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • galaxx Friend
    #1092162

    Adding an icon to a "Home" menu item in the main menu causes a bug in a "small" layout (please, see screenshots). When Navigation bar splits into 2 rows (upper and lower), first menu item in the second (lower) row is not aligned with the "Home" item in an upper row, as it normally happens, when "Home" item has no icon. Icon was added in a regular way through the corresponding Joomla’s admin panel section (Edit menu Item).


    1. Homeicon_bug1
    2. Homeicon_bug2
    3. Homeicon_bug3
    galaxx Friend
    #1092172
    This reply has been marked as private.
    galaxx Friend
    #1092173

    Update – this issue with icon appears in Firefox browser (58.0.2 64bit) and doesn’t appear in Chrome browser (63.0.3239 64bit)

    Pankaj Sharma Moderator
    #1092194

    Hi
    The issue is not with icon, When u reduce the width of the browser there is not enough space to fit all the menu items in a single line so it went to 2nd line.
    Adding an icon in menu consume some more space.
    If you want i can help you to change the breakpoint of the menu, so when the menu goes to 2nd row you will see the mobile menu.

    Regards

    galaxx Friend
    #1092211

    Hi! the problem is the following: in Firefox browser first menu Item in a lower row is aligned to the SECOND menu item in an upper row, though in Chrome browser first item is aligned to the first item… Have you checked my link ( http://u67890.netangels.ru ) in both browsers? Please, check the screenshots attached

    • This reply was modified 2 years, 5 months ago by  galaxx.

    1. Homeicon_bug-Firefox2
    2. Homeicon_bug-Firefox1
    3. Homeicon_bug-Chrome2
    4. Homeicon_bug-Chrome1
    Pankaj Sharma Moderator
    #1092227

    Hi
    It seems you added an image not the icon, that results in a full width.
    Kindly add the home menu icon from Mega menu options.
    if any difficulty let me know with site super user details in Privat reply, I will add it for you and share details here.

    Regards

    galaxx Friend
    #1092239

    Yes, I tried to use Font Awesome icon by inserting fas fa-home in "icon" field of a Megamenu manager, but I got a small emty square instead of a home glyth. Anyway, I will need to add images, too. Why does adding an image causes a problem in one popular browser, and works good in other popular browser? Guess it should work flawlessly in both browsers. Can you kindly fix this?

    galaxx Friend
    #1092241

    Got a correct glyth by inserting fa fa-home in "icon" field of a Megamenu manager instead of
    fas fa-home, as shown on a Font Awesome page (please, see screenshot). But I suggest to check the issue with menu items images in Firefox anyway.


    1. fas-fa-home
    Pankaj Sharma Moderator
    #1092450

    Hi
    The chrome and firefox use a different style and there is always some difference in the view as well.
    This is why I suggested using Font-awesome that is not an image, an image using full width in height as well.
    You can add below code in /css/custom.css file to increase the icon size and change the color as well

    .fa-home:before {
        color: red;
        font-size: 18px;
    }

    Regards

Viewing 9 posts - 1 through 9 (of 9 total)

This topic contains 8 replies, has 2 voices, and was last updated by  Pankaj Sharma 2 years, 5 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum