• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 How can I stop line breaks in navbar <li></li> ?

Phases

Active member
#1
In the navbar <li>, the only way I can get an item to remain on the same line as everything else is if I put it inside the <a> tag. If I put it after, it drops down, if I put it before, the <a> block drops down.

How do I get around this?

For example, this is normal, navigation template code. :
Code:
<li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>
If I do this, though, the TEST will drop down a line:
Code:
<li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a>TEST</li>
And if I do this, the "New Posts" link will drop down a line:
Code:
<li>TEST<a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>
I can't seem to figure this out. Can someone help?
 

Phases

Active member
#3
Well, just trying to add content next to a sub-link that isn't actually part of the link, really. But I want it up against the link (so a different <li></li> block won't do). Like a tiny image.
 

Brogan

XenForo moderator
Staff member
#5
I'm really not clear on what it is you're trying to do.
To add a new link to the sub nav bar you just use, for example:
Code:
<li><a href="{xen:link 'threads/featured'}">{xen:phrase cta_ft_featured_threads}</a></li>
 

EQnoble

Well-known member
#6
Here is one way to go about it...

Find this:
HTML:
<li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>
Replace with:
HTML:
<li><span class="tlIco tlIcoNewPosts"><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></span></li>
If you want to add icons to more than just one tab link just wrap the <a> tags with the <span> again and name the second class to suit, for example to add an icon to the search forum sub link you would edit this as well...

Find this:
HTML:
<xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
Replace with:
HTML:
<xen:if is="{$canSearch}"><li><span class="tlIco tlIcoSearch"><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></span></li></xen:if>
Notice that I wrapped the <a> tags with <span> tags and applied one common class and one unique class when compared to the first example



Then in Extra.css add one of the following (left or right):

With icons to the right:
Code:
.tlIco {
    display: block;
    padding-right: 20px;
}

.tlIcoNewPosts {
    /*change this "path/to/image" to suit your needs*/
    background: url("http://eqmandingo.com/20px.png") no-repeat scroll right 0;
}

.tlIcoSearch{
    /*change this "path/to/image" to suit your needs*/
    background: url("http://eqmandingo.com/20px.png") no-repeat scroll right 0;
}
With icons to the left
Code:
.tlIco {
    display: block;
    padding-left: 20px;
}

.tlIcoNewPosts {
    /*change this "path/to/image" to suit your needs*/
    background: url("http://eqmandingo.com/20px.png") no-repeat scroll left 0;
}

.tlIcoSearch{
    /*change this "path/to/image" to suit your needs*/
    background: url("http://eqmandingo.com/20px.png") no-repeat scroll left 0;
}



Then if you want to add icons to any other sub link you just wrap the <a> tags with the <span> tags just like the first replacement above ...

except now you would replace the second class in <span class="tlIco tlIcoNewPosts"> with something suitable to the tab you are placing an icon for like

<span class="tlIco tlIcoLinkNameHere">

and then make a corresponding css rule for it in extra.css by copying the last icon class you made and editing it like this

.tlIcoLinkNameHere{
/*change this "path/to/image" to suit your needs*/
background: url("http://eqmandingo.com/20px.png") no-repeat scroll right 0;​
}

then just replace the http://eqmandingo.com/20px.png to set proper image locations for the icons that you wish to use in each icon link class that you created


hopefully that gets you started
 

Phases

Active member
#7
Thanks for your reply!! I think I've tried similar, but following your example I have done this:

Replace:
Code:
<li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>
With:
Code:
<li><span class="tlIco"><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a>test</span></li>
And added to extra.css:
Code:
.tlIco {
display: block;
padding-right: 20px;
}
The word "test" is still falling down to the next line and hiding behind the next content block. If I can get that word test to stay in line, I would be golden I think. Any thoughts?