fbpx
Welcome, Guest
Username: Password: Remember me

TOPIC: menu icon position

menu icon position 3 years 3 weeks ago #8486

  • peterp
  • peterp's Avatar
  • Offline
  • New Member
  • Posts: 15
  • Karma: 0
Hello !
I tried to add icons to the items of the dropdown menu.
The problem is :
  • icon position without text is OK if no sub item
  • icon position without text is UP if item has sub item
  • icon position with text is UP

  • I would like the icon to be at the left part of the text of each item.
    In the attached picture you can see more details.

    Thanks for your help...
    Attachments:
    The administrator has disabled public write access.

    menu icon position 3 years 3 weeks ago #8497

    • chandandeep
    • chandandeep's Avatar
    • Offline
    • Administrator
    • Posts: 4614
    • Thank you received: 652
    • Karma: 116
    Hello,

    Thanks for reporting. Add the below code in custom.css file.
    Path: templates/TEMPLATENAME/css

    Note: If there is no custom.css file please create it and save the code in it.
    .sp-megamenu-parent >li a img,
    .sp-megamenu-parent >li span img {
        display: inline-block;
    }

    Thanks,
    Chandan
    Thank You,
    If you like our support and products, tweet us at joomdev and let the world know about it.

    To know more about products check out the their documentation.
    The administrator has disabled public write access.

    menu icon position 3 years 3 weeks ago #8510

    • peterp
    • peterp's Avatar
    • Offline
    • New Member
    • Posts: 15
    • Karma: 0
    Thanks Chanda !
    Works as expected... in menu position for parent items...
    I would be very pleased if you could help me for child items and offcanvas menu too...

    Best regards
    Attachments:
    The administrator has disabled public write access.

    menu icon position 3 years 3 weeks ago #8520

    • chandandeep
    • chandandeep's Avatar
    • Offline
    • Administrator
    • Posts: 4614
    • Thank you received: 652
    • Karma: 116
    Hello,

    Try the following code.

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a .image-title,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item span .image-title{
    	display: inline-block;
    }
    
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a img,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item > span img{
    	display: inline-block;
    }

    Thanks,
    Chandan
    Thank You,
    If you like our support and products, tweet us at joomdev and let the world know about it.

    To know more about products check out the their documentation.
    The administrator has disabled public write access.

    menu icon position 3 years 3 weeks ago #8525

    • peterp
    • peterp's Avatar
    • Offline
    • New Member
    • Posts: 15
    • Karma: 0
    Hello Chandan !
    Thanks for the code you sent me.
    I tried it and it works all good !

    Before you replied to me, I tried to resolve my problem using this code :
    .sp-megamenu-parent >li a img,
    .sp-megamenu-parent > li span img ,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item span
    {
    display: inline-block;
    padding-right: 5px;
    }
    which seems to give same results for the menu and dropdown (except padding I added).
    What do you think of it ? (remember I'm a newbie...)

    About offcanvas menu, I tried this code :
    .offcanvas-menu .offcanvas-inner .sp-module ul a img,
    .offcanvas-menu .offcanvas-inner .sp-module ul span img,
    .offcanvas-menu .offcanvas-inner .sp-module ul > li a,
    .offcanvas-menu .offcanvas-inner .sp-module ul > li span
    {
    display: inline-block;
    padding-right: 5px;
    }
    But I notice
    - icons are not aligned (vertical)
    - parent icon item and title item are separated if item has submennu
    - arrow on the left part of item title that has sebmenu should be cancelled...
    - area color for selected parent item is destroyed...

    I'm still working on it trying all kind of things as I don't know neither html nor css code...

    Thanks for all...
    Attachments:
    The administrator has disabled public write access.

    menu icon position 3 years 2 weeks ago #8579

    • chandandeep
    • chandandeep's Avatar
    • Offline
    • Administrator
    • Posts: 4614
    • Thank you received: 652
    • Karma: 116
    Hello,

    Who says you are a newbie? You have written the correct code. I am Impressed. :cheer:
    For the second one. I need the site URL to confirm the what is wrong in the code. Please share.

    Thanks,
    Chandan
    Thank You,
    If you like our support and products, tweet us at joomdev and let the world know about it.

    To know more about products check out the their documentation.
    The administrator has disabled public write access.

    menu icon position 3 years 2 weeks ago #8607

    • peterp
    • peterp's Avatar
    • Offline
    • New Member
    • Posts: 15
    • Karma: 0
    Hello Chandan,
    You are kind to me...

    About my problem with icons in menu, I think I'm going to give up.
    This wil save time for you to share with ohters.

    I'm trying to add icons via Joomla regular options (see attached file).
    This way, too many problems appear (align, active title color, span color, offcanvas menu span & color...)

    When I use Helix option in the menu settings, it works percfectly.
    Icons provided are those of special file made for this purpose (fonts folder/woof file and other, Am I Right ?).
    These icons don't suit to the item titles I've set for menu...

    Maybe Joomla or Helix framework will provide these options whatever the image in whatever the folder I choose.

    For now, I decide to use some personal icons for menu parents item title only.

    As soon as the website is online, I'll send you a message for offcanvas problems (span color, icon alignment...)

    Thanks for all Chandan.
    Attachments:
    The administrator has disabled public write access.

    menu icon position 3 years 2 weeks ago #8660

    • chandandeep
    • chandandeep's Avatar
    • Offline
    • Administrator
    • Posts: 4614
    • Thank you received: 652
    • Karma: 116
    Hello,

    Both Joomla and Helix are offering different functionalities. Joomla Gives the image next to the menu item. We can't change the normal, hover and active color because this is an image. On the other side. Helix gives the FontAwesome icons. We can set them everywhere and also can manage the normal, hover and active color. This is very lightweight. Easy to use. But the only problem. We have limited icons. You can see here.
    fontawesome.com/v4.7.0/icons/

    Thanks,
    Chandan
    Thank You,
    If you like our support and products, tweet us at joomdev and let the world know about it.

    To know more about products check out the their documentation.
    The administrator has disabled public write access.
    Moderators: chandandeep
    Time to create page: 0.402 seconds
    Cron Job Starts