Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Main menu items with sub-menus are out of line with other menu items

Featured Lock Resolved Issue
Hi,

On the resort template, any main menu items that have a drop-down submenu item show out of line with menu items with no drop-down.

Can it be set somehow in CSS to make all menu items on the same level?

Many thanks,

Chris

Attachments (1)

  • menu-alignment.jpg
    menu-alignment.jpg 20.9 KB

5 Answers

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks for your query. I have doubt about your query. Can you show me an screenshot from our demo resort template that you want to do.

-Thanks

Chris

More than a month ago #Permalink
Yes, no problem, attached.

The 'Pages' and 'Blog' menu words are not in line with the other menu items, they are lower down.

Can they be made to be in line with all the other ones?

Thanks,

Chris

Attachments (1)

  • resort.jpg
    resort.jpg 116.8 KB

Toufiq - Staff

More than a month ago #Permalink
Hi, Thanks for your reply. I have find a solution for you. Please follow the below instruction's.

1. Find out below css code from menu.less or template.css file

.has-slideshow#sp-header .sp-megamenu-parent >li >a {
line-height: 70px;
-webkit-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
color: #fff;
}

And replace with this code

.has-slideshow#sp-header .sp-megamenu-parent >li >a {
line-height: 73px;
-webkit-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
color: #fff;
}

2.Find out below css code from menu.less or template.css file

.sp-megamenu-parent >li.sp-has-child>a:after {
font-family: "FontAwesome";
content: " \f0d7";
}


And replace with this code

.sp-megamenu-parent >li.sp-has-child>a:after {
font-family: "FontAwesome";
content: " \f0d7";
line-height: 71px;
}


Note: If you can't reach there, please let me know.

-Thanks

Chris

More than a month ago #Permalink
Toufiq wrote:

Hi, Thanks for your reply. I have find a solution for you. Please follow the below instruction's.

1. Find out below css code from menu.less or template.css file

.has-slideshow#sp-header .sp-megamenu-parent >li >a {
line-height: 70px;
-webkit-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
color: #fff;
}

And replace with this code

.has-slideshow#sp-header .sp-megamenu-parent >li >a {
line-height: 73px;
-webkit-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
color: #fff;
}

2.Find out below css code from menu.less or template.css file

.sp-megamenu-parent >li.sp-has-child>a:after {
font-family: "FontAwesome";
content: " \f0d7";
}


And replace with this code

.sp-megamenu-parent >li.sp-has-child>a:after {
font-family: "FontAwesome";
content: " \f0d7";
line-height: 71px;
}


Note: If you can't reach there, please let me know.

-Thanks


That works great :) Only thing is when you then scroll down the page and have the menu as sticky, the sticky menu has those menu items jump out of line again?

Chris

Toufiq - Staff

More than a month ago #Permalink
Chris wrote:

Toufiq wrote:

Hi, Thanks for your reply. I have find a solution for you. Please follow the below instruction's.

1. Find out below css code from menu.less or template.css file

.has-slideshow#sp-header .sp-megamenu-parent >li >a {
line-height: 70px;
-webkit-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
color: #fff;
}

And replace with this code

.has-slideshow#sp-header .sp-megamenu-parent >li >a {
line-height: 73px;
-webkit-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
color: #fff;
}

2.Find out below css code from menu.less or template.css file

.sp-megamenu-parent >li.sp-has-child>a:after {
font-family: "FontAwesome";
content: " \f0d7";
}


And replace with this code

.sp-megamenu-parent >li.sp-has-child>a:after {
font-family: "FontAwesome";
content: " \f0d7";
line-height: 71px;
}


Note: If you can't reach there, please let me know.

-Thanks


That works great :) Only thing is when you then scroll down the page and have the menu as sticky, the sticky menu has those menu items jump out of line again?

Chris


Hi, Thanks for your reply. Please add follow the below instructions.

2.Find out below css code from menu.less or template.css file

.sp-megamenu-parent >li.sp-has-child>a:after {
font-family: "FontAwesome";
content: " \f0d7";
line-height: 71px;
}


And replace with this code

.sp-megamenu-parent >li.sp-has-child>a:after {
font-family: "FontAwesome";
content: " \f0d7";
line-height: 59px;
}


-Thanks


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 122
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 119
Toufiq

Toufiq

Total Accepted Answers: 54
Pavel

Pavel

Total Accepted Answers: 5
Peter Atkin

Peter Atkin

Total Accepted Answers: 2

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us