xenForo 2.x.x Navtab menu FontAwesome use of [Deleted]

Emre

Emre

Well-known member
ByDost submitted a new resource:

xenForo 2.x.x Navtab menu FontAwesome use of - xenForo 2.x.x Navtab menu FontAwesome use of

xenForo 2.x.x Navtab menu FontAwesome use of

Demo;
View attachment 165254

extra.less You just need to add the following codes to your template
CSS: 
/* xFDestek.com - Üst menü iconları - Başlangıç */
.p-navEl [data-nav-id="forums"]:before{font-family:FontAwesome;content:"\f27a";padding-right:5px}
.p-navEl [data-nav-id="whatsNew"]:before{font-family:FontAwesome;content:"\f128";padding-right:5px}
.p-navEl...
Click to expand...

Read more about this resource...
 
;)
CSS: 
.p-navEl-link{                              
    &:before{padding-right:5px;font-family: FontAwesome;content: "\f29c";}              
    &[data-nav-id="home"]{&:before{content: "\f015";}}
    &[data-nav-id="forums"]{&:before{content: '\f0e6';}}
    &[data-nav-id="whatsNew"]{&:before{content: '\f128';}}
    &[data-nav-id="members"]{&:before{content: '\f0c0';}}
    &[data-nav-id="xfrm"]{&:before{content: '\f019';}}
    &[data-nav-id="xfmg"]{&:before{content: '\f030';}}
    &[data-nav-id="newPosts"]{&:before{content: '\f06d';}}
    &[data-nav-id="findThreads"]{&:before{content: '\f00e';}}
    &[data-nav-id="searchForums"]{&:before{content: '\f002';}}
    &[data-nav-id="markForumsRead"]{&:before{content: '\f070';}}
    &[data-nav-id="whatsNewPosts"]{&:before{content: '\f0f6';}}
    &[data-nav-id="xfrmNewResources"]{&:before{content: '\f019';}}
    &[data-nav-id="whatsNewProfilePosts"]{&:before{content: '\f040';}}
    &[data-nav-id="whatsNewNewsFeed"]{&:before{content: '\f09e';}}
    &[data-nav-id="latestActivity"]{&:before{content: '\f005';}}
    &[data-nav-id="xfrmLatestReviews"]{&:before{content: '\f091';}}
    &[data-nav-id="xfrmYourResources"]{&:before{content: '\f0ed';}}
    &[data-nav-id="xfrmWatched"]{&:before{content: '\f0a7';}}
    &[data-nav-id="xfrmSearchResources"]{&:before{content: '\f002';}}
    &[data-nav-id="currentVisitors"]{&:before{content: '\f234';}}
    &[data-nav-id="newProfilePosts"]{&:before{content: '\f040';}}
    &[data-nav-id="searchProfilePosts"]{&:before{content: '\f21b';}}
}
 
Hi! Thanks for sharing this, Emre.

I have two questions:

1) Is there a way to have elements of the navigation menu with just an icon and no text?
2) Is there a way to have an icon appear in mobile navigation too? This is in conjunction with question number 1, because if I choose just an icon... and the icon doesn't appear, the menu entry would not be understandable.

Thanks again. :)
 
Ok, as far as question #2, I found out that adding an equivalent entry in extra.less for each menu entry works (below just an example with one menu entry):

.offCanvasMenu-linkHolder [data-nav-id="latestActivity"]:before{font-family:FontAwesome;content:"\f005";padding-right:3px}

Still don't know how to get an entry without a text title and just an icon, as Xenforo refuses to save it.
 
gorman said:
1) Is there a way to have elements of the navigation menu with just an icon and no text?
Click to expand...
Yes.
gorman said:
2) Is there a way to have an icon appear in mobile navigation too? This is in conjunction with question number 1, because if I choose just an icon... and the icon doesn't appear, the menu entry would not be understandable.
Click to expand...
I'll post an update soon. For mobile and tablet devices, icons will also be added.
 
Turkiye is always kind. (y)
After you prepare for mobile and tablet devices, I will bring your other request after updating.;)
Will you wait a moment? I'm writing codes for the source. Thank's.:coffee:
 
Emre said:
Turkiye is always kind. (y)
After you prepare for mobile and tablet devices, I will bring your other request after updating.;)
Will you wait a moment? I'm writing codes for the source. Thank's.:coffee:
Click to expand...
I saw the update. It helped me in styling some entries of a different class (the simple a[href* ones).
I'll wait for help on "no text" entries. Emre used to be a very strong football player that played for my team (Inter Milan). I remember he was instrumental in your third place in the World Cup some years ago. :)
 
@gorman , Need to edit URL structure. As I was doing route filter editing, I specified the URL accordingly.
a[href*="/URLuse-Rotafiltre/"]:
 
Emre said:
@gorman , Need to edit URL structure. As I was doing route filter editing, I specified the URL accordingly.
a[href*="/URLuse-Rotafiltre/"]:
Click to expand...
Hi! I freely admit my ignorance... I'm not a programmer/designer or anything. I simply selected, as an icon, one of the FontAwesome icons. I put as menu title a simple . (to make it as little visible as possible). I would simply like to hide this .
The menu entry is a node listing of all the forums and subforums, to bring back some sort of QuickNav option, that my users are asking after updating to 2.0.

As such... what you just described might as well be alien language to me. Sorry, Emre. :)
 
It currently appears like this:

1526748505670.webp

I used "after" instead of "before" but the point is making that small . disappear. And Xenforo refuses to save a navigation menu entry without a title.
 
Niro said:
It is not working for me, before the update, it was working, but now its not.
Click to expand...
May be due to the route filter. Use URL parameters appropriate to Route Filter.

2018-05-21_01-25-37.webp

Sample;
route filter I use;
yeni-mesajlar/konular
default route filter;
find-new/posts

Should be edited;
HTML: 
.offCanvasMenu a[href*="/yeni-mesajlar/konular/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f05b" }
change;
HTML: 
.offCanvasMenu a[href*="/find-new/post/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f05b" }

Send site address. I will send sample codes.
 
If anyone was interested in having menu entries with just an icon and no text, I've discovered (a colleague of mine, to be honest :)) that while Xenforo refuses to name the entry with a space, it accepts  

On the other hand, there's one thing I don't understand. If I have a navigation menu entry that needs to be clicked to activate a node list below it, in regular desktop mode the whole entry is clickable, while in responsive/mobile mode I need to press the down arrow to show the node list below. How can I have the whole area "touchable"?

Currently the situation is like in the image I attach, for mobile use:

1526912476380.webp

Whereas in desktop use the whole area is clickable:

1526912816406.webp

Edit: the red highlight is there just to show what area is clickable, it was added in an image manipulation program.
 
Last edited:
@Emre do you think I should ask somewhere else about this specific "problem" (areas clickable in mobile menu)? Maybe the styling and customization area? I asked here because I'm not sure if it's something depending on the fontawesome mod or not.

Thank you!
 
You must log in or register to reply here.

Similar threads

Emre
xenForo 2.1.x Navtab menu FontAwesome 5 use of [Deleted]
Replies
7
Views
1K
Emre
Emre
Back
Top Bottom