Joomla Templates Club 406,261 posts

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#871356

Hi,

We would like to add a CSS triangle pointing up, on each active/focused/hover mega-menu, approximately where I have highlighted in this image – http://prntscr.com/9wasm0

I can find CSS triangle code on other sites, but I can’t find which class or where to position it correctly on the mega-menu.

Please advise.
Thank you

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#873084

Hi
You can add the custom style using custom.css , Here is the style code used for the Mega menu items :

.uber-header.header-5.dark-color .navbar-default .navbar-nav > li > a {
    text-transform: none;
    padding-left: 0;
    padding-right: 52px;
    font-weight: 700;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

Here: http://prntscr.com/9xhi1y
Not sure what exactly u want to add as there is already the caret icon showing as triangle > http://prntscr.com/9xhhr8

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#873303

Hi @pankaj Sharma,

Thank you for your reply.

I have added your code to custom.css but I can’t see any change unfortunately…

We want the triangle to be at the top of the sub-menus and pointing upwards. Like the screenshot showed on this page – https://www.sitepoint.com/community/t/how-to-add-a-triangle-pointer-to-the-top-of-a-drop-menu/117820

Please advise.
Thank you.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#873307

Hi
For the caret this code is used in template style

.t3-megamenu .nav > .dropdown > .dropdown-toggle .caret {
    border: 0;
    margin-top: -30px;
    margin-left: 5px;
}

You can change the value of margin top and margin-left to move it down and right via custom.css file .
Also add additional style in this code .
Hope this help .

[Author]

Posts