Joomla Templates Club 406,261 posts

[galaxx Friend galaxxJoin date: November 2017Posts: 51Downloads:24Uploads:12 Thanks: 3]

#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).

---

Attachments:

1. 
2. 
3. 

[galaxx Friend galaxxJoin date: November 2017Posts: 51Downloads:24Uploads:12 Thanks: 3]

#1092172

This reply has been marked as private.

[galaxx Friend galaxxJoin date: November 2017Posts: 51Downloads:24Uploads:12 Thanks: 3]

#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 Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#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 galaxxJoin date: November 2017Posts: 51Downloads:24Uploads:12 Thanks: 3]

#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 6 years, 9 months ago by  galaxx.

---

Attachments:

1. 
2. 
3. 
4. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#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 galaxxJoin date: November 2017Posts: 51Downloads:24Uploads:12 Thanks: 3]

#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 galaxxJoin date: November 2017Posts: 51Downloads:24Uploads:12 Thanks: 3]

#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.

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#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

[Author]

Posts