Alignment of icons in main menu, Juliet template

Votes

Undo

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

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?

Responses (6)

ziggy

Accepted Answer Pending Moderation

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

one week ago
Commercial Templates
# 1

vincebodie

Accepted Answer Pending Moderation

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

screen-grab- 2025-04-12 at 8.43.11 AM.jpg

one week ago
Commercial Templates
# 2

ciaran

Accepted Answer Pending Moderation

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

vincebodie

Accepted Answer Pending Moderation

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

ziggy

Accepted Answer Pending Moderation

Votes

Undo

Nice... thank you for sharing your solution!

Ciaran

vincebodie

Accepted Answer Pending Moderation

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

Page :
1

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

Please login to post a reply

You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here. Register Here »

Forgot Password?

Alignment of icons in main menu, Juliet template

Site Links

Recommended

Join Our Newsletter