Recent
Categories
View Replies (6)

Alignment of icons in main menu, Juliet template

0
Votes
Undo
  1. vincebodie
    vincebodie
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 11 April 2025
  5.  Subscribe via email
Have a look at the attached screen shot which is the menu item for this page:
https://surfwaxandbikinis.com/lessons/online-zoom-guitar-lessons-with-tim-quinn

screen-grab- 2025-04-11 at 10.09.52 AM.jpg

I want the icon to be to the left of the text. Adding "float:left" to the image puts it next to the text, but the Link Title Attribute "Remote Lessons Online" displays above the menu item title instead of below it. How can I fix these issues?
Attachments (1)
screen-grab- 2025-04-11 at 10.09.52 AM.jpg screen-grab- 2025-04-11 at 10.09.52 AM.jpg
Responses (6)
ziggy
ziggy
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Vince

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.hornav li.item-1555 .skypemenu {

    display: flex;

    align-items: center;

    gap: 10px;

}


Ciaran
  1. one week ago
  2. Commercial Templates
  3. # 1
vincebodie
vincebodie
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Vince

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.hornav li.item-1555 .skypemenu {

    display: flex;

    align-items: center;

    gap: 10px;

}


Ciaran

Thanks for that, it fixed the icon alignment.
What about the Link Title Attribute displaying above the menu item title when there is an icon? When there is no icon it is below as you would expect, like in the first submenu item here:

screen-grab- 2025-04-12 at 8.43.11 AM.jpg
Attachments (1)
screen-grab- 2025-04-12 at 8.43.11 AM.jpg screen-grab- 2025-04-12 at 8.43.11 AM.jpg
  1. one week ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

As the caption is part of the Skype icon, the only alternative option with CSS alone is to move the icon and caption under the link text..

.hornav li.item-1555 {

    display: flex;

    flex-direction: column;

}

.hornav .skypemenu {

    order: 1;

}


Ciaran
  1. 5 days ago
  2. Commercial Templates
  3. # 3
vincebodie
vincebodie
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
OK, that worked. Here's my full css to get it looking like the screen shot:



.hornav > ul > li > ul > li, .hornav > ul > li ul > li > ul > li {

min-width: 240px;

line-height: 1.5rem;

}

.hornav > ul > li > ul > li > a, .hornav > ul > li ul > li > ul > li > a {

    font-size: 1rem;

}

.hornav > ul > li > ul > li > a:after, .hornav > ul > li ul > li > ul > li > a:after {

    font-size: 12px;

    opacity: 1;

}

.hornav > ul > li img {

    margin-top: -3px;

    margin-bottom: 1px;

}

.hornav > ul > li > a {

margin: 0 15px;

}

.hornav > ul li {

margin-left: 0;

}

.hornav li.item-1555 .skypemenu {

    display: flex;

    align-items: center;

    gap: 10px;

}

.hornav li.item-1555 {

    display: flex;

    flex-direction: column;

}

.hornav .skypemenu {

    order: 1;

}


screen-grab- 2025-04-16 at 7.42.37 AM.jpg
Attachments (1)
screen-grab- 2025-04-16 at 7.42.37 AM.jpg screen-grab- 2025-04-16 at 7.42.37 AM.jpg
  1. 5 days ago
  2. Commercial Templates
  3. # 4
ziggy
ziggy
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Nice... thank you for sharing your solution!

Ciaran
  1. 4 days ago
  2. Commercial Templates
  3. # 5
vincebodie
vincebodie
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Nice... thank you for sharing your solution!

Ciaran

You're so welcome! Now maybe I'll get a little discount on my next template purchase... ;)
  1. 4 days ago
  2. Commercial Templates
  3. # 6
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok