We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (8)

Resolved How do I change the lines on the megamenu so they are on the top?

0
Votes
Undo
  1. Trent Perez
    Trent Perez
  2. Sherlock Holmes
  3. General Discussion
  4. Tuesday, 11 August 2015
  5.  Subscribe via email
I cannot figure out where the lines on the menu buttons comes from. I thought they were a bottom border but I cannot find the css that causes them to appear anywhere. I want to change them so they are at the top of the menu buttons and not at the bottom. I would alsol like to change the color of them but I figured once I find out where they are being created I can change the color. Also since I am working in development mode I am looking for the less file that is making the lines appear since I don;t want to have to change them back every time I re-compile the less to css. I am attaching an image of the menu as it sits now. The site is not live yet so I cannot provide a link to the site.
Attachments (1)
main menu lines.png main menu lines.png
Comment
There are no comments made yet.
Responses (8)
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

The line is for active menu. To remove the line, you can open the custom.css (templates/purity_iii/css) file and add the following css rule:

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {

    box-shadow: none;

}


Regards.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
You are welcome!
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Trent Perez
Trent Perez
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
That would be great if I wanted to remove the line completely but what I want to do is put the line on top. So would I enter the line as
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {



    box-shadow: 3px;



}

that is if I wanted a 3 pixel line at the top.
I would also like to know how you figured out that is where the code was located. You probrably just knew it but I am completely unfamiliar with the T3 framework and the purity_iii template and figure I should learn how to find this stuff out myself. If you could help me figure out how to go about locating the code for different aspects I would appreciate it.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

To have the line on the top, please use the following css rule:

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {

    box-shadow: 0 3px 0 #ffffff inset;

}
or A very elegant way is to use ng-controller to run a single controller outside of the ng-view:

<div class="collapse navbar-collapse" ng-controller="HeaderController">

    <ul class="nav navbar-nav">

        <li ng-class="{ active: isActive('/')}"><a href="/">Active</a></li>

        <li ng-class="{ active: isActive('/')}"><a href="/dogs"></a></li>

        <li ng-class="{ active: isActive('/')}"><a href="/cats"></a></li>

    </ul>

</div>

<div ng-view></div>
My Website not using nav bar see Exsample here Grosir Baju

Regards.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Trent Perez
Trent Perez
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Luna? not sure what I should call you. But thank you for the assistance. Just to make sure I am understanding what I have been reading the box-shadow property has basically three values plus the color value associated with it. they would be vertical offset then horizontal offset then fade value then the color value plus inset if the shadow is suppose to go to the top or to the left. Is that correct?
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
You're welcome!

You can add other attribute to the css rule. Let me know if you have any other issue.

Regards.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 6
anda sumatra tour and travel
anda sumatra tour and travel
Accepted Answer Pending Moderation
0
Votes
Undo
thank you
this is awesome solving pro
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 7
Gino
Gino
Accepted Answer Pending Moderation
0
Votes
Undo
Very helpful!
Thanks :D
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 8
  • Page :
  • 1


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