1. 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> ?

Discussion in 'Styling and Customization Questions' started by Phases, Nov 30, 2013.

  1. Phases

    Phases Active Member

    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?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    What are you trying to do?
     
  3. Phases

    Phases Active Member

    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.
     
  4. Phases

    Phases Active Member

    No one? I thought for sure this would be an easy fix!
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    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>
     
  6. EQnoble

    EQnoble Well-Known Member

    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 likes this.
  7. Phases

    Phases Active Member

    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?
     

Share This Page