Joomla Templates Club 406,261 posts

[bohemiadesign Friend bohemiadesignJoin date: March 2010Posts: 194Downloads:26Uploads:19 Thanks: 16 Thanked: 1 times in 1 posts]

#647012

Hi,

By default when hovering over the menu items on the main menu the lines are animated under the menu item. Is it possible to move the lines to be above the menu?
Thanks
Jh

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#647135

Hi there
Please provide your site access for inspecting

Thank you,
Viet Vu

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#744156

Hi there
Please provide your site access for inspecting

Thank you,
Viet Vu

[bohemiadesign Friend bohemiadesignJoin date: March 2010Posts: 194Downloads:26Uploads:19 Thanks: 16 Thanked: 1 times in 1 posts]

#647136

Hi,
I have just started to look at this site and have it on localhost.
Here is a link to demo site http://www.joomlart.com/demo/#ja_fixel
where you can see the lines under the main menu.
Thanks
Jh

[bohemiadesign Friend bohemiadesignJoin date: March 2010Posts: 194Downloads:26Uploads:19 Thanks: 16 Thanked: 1 times in 1 posts]

#744157

Hi,
I have just started to look at this site and have it on localhost.
Here is a link to demo site http://www.joomlart.com/demo/#ja_fixel
where you can see the lines under the main menu.
Thanks
Jh

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#647137

Hi there
Please try these code with :before

.t3-mainnav .navbar .nav > .active > a:after, .t3-mainnav .navbar .nav > .active > a:hover:after, .t3-mainnav .navbar .nav > .active > a:focus:after {
background-color: #fff
width: 100%;
}

.t3-mainnav .navbar .nav > li > a:after {
background: #eee
bottom: 15px;
content: "";
display: block;
height: 2px;
left: 0;
position: absolute;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
width: 0;
}

Thank you,
Viet Vu

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#744158

Hi there
Please try these code with :before

.t3-mainnav .navbar .nav > .active > a:after, .t3-mainnav .navbar .nav > .active > a:hover:after, .t3-mainnav .navbar .nav > .active > a:focus:after {
background-color: #fff
width: 100%;
}

.t3-mainnav .navbar .nav > li > a:after {
background: #eee
bottom: 15px;
content: "";
display: block;
height: 2px;
left: 0;
position: absolute;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
width: 0;
}

Thank you,
Viet Vu

[bohemiadesign Friend bohemiadesignJoin date: March 2010Posts: 194Downloads:26Uploads:19 Thanks: 16 Thanked: 1 times in 1 posts]

#647152

Hi,
Thank you for getting back to me. I have been looking for the .less file where to change the suggested code but can’t find it.
I tried putting into a custom.css file but that didn’t work. I believe the reason it didn’t work is that the style is not exactly the same.

Thanks

Jh

[bohemiadesign Friend bohemiadesignJoin date: March 2010Posts: 194Downloads:26Uploads:19 Thanks: 16 Thanked: 1 times in 1 posts]

#744173

Hi,
Thank you for getting back to me. I have been looking for the .less file where to change the suggested code but can’t find it.
I tried putting into a custom.css file but that didn’t work. I believe the reason it didn’t work is that the style is not exactly the same.

Thanks

Jh

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#647153

Hi there
You can try with another way : border-top
Ps:// Please do not touch less file. Only work with custom.css

Thank you,
Viet Vu

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#744174

Hi there
You can try with another way : border-top
Ps:// Please do not touch less file. Only work with custom.css

Thank you,
Viet Vu

[bohemiadesign Friend bohemiadesignJoin date: March 2010Posts: 194Downloads:26Uploads:19 Thanks: 16 Thanked: 1 times in 1 posts]

#647154

But I use border top I can I still get the animated line? and how do I turn-off the line under the menu item?

[bohemiadesign Friend bohemiadesignJoin date: March 2010Posts: 194Downloads:26Uploads:19 Thanks: 16 Thanked: 1 times in 1 posts]

#744175

But I use border top I can I still get the animated line? and how do I turn-off the line under the menu item?

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#647163

Hi there
In fact you can use with animate but with extra css 3. Please check out css 3 document for detail.
If you can’t work on it please provide your site backend & CPanel access. I’ll help you work on it.

Thank you,
Viet Vu

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#744184

Hi there
In fact you can use with animate but with extra css 3. Please check out css 3 document for detail.
If you can’t work on it please provide your site backend & CPanel access. I’ll help you work on it.

Thank you,
Viet Vu

[Author]

Posts