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

Nav Tabs - spacing

Discussion in 'Styling and Customization Questions' started by Morgain, Oct 29, 2011.

  1. Morgain

    Morgain Well-Known Member

    I have moved two tabs along the navigation row to the end (after Help).
    I would really like there to be a space between Help and these two important tabs so they appear in the centre of the bar.

    On my board Forums = COMMUNITY
    and wiki = LIBRARY.
    These are the important links I want centred.

    So I get this:

    Home Members Help space space COMMUNITY LIBRARY space space User Inbox Alerts Logout

    How do I make spaces like this please?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Add this code:

    Code:
    .navTabs .navTab.help
    {
    	margin-right: 50px;
    }
    
    Use any pixel value you want.
     
    Morgain likes this.
  3. Morgain

    Morgain Well-Known Member

    Jake that didnt do anything :(
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    It works on my test forum, but not when I add your comments:

    Code:
    <!-- spacing of navbar -->
    .navTabs .navTab.help
    {
    	margin-right: 100px;
    }
    
    That's an HTML comment. CSS comments are like this:

    Code:
    /* spacing of navbar */
    .navTabs .navTab.help
    {
    	margin-right: 100px;
    }
    
     
    Morgain likes this.
  5. Morgain

    Morgain Well-Known Member

    Jake thank you for your patience. I learned html over 20 years ago and I've never got comfy with css

    Please could you tell me the css first line - the name - for the secondary tabs under the -forums- tab.
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Code:
    .navTabs .navTab.forums .blockLinksList
    
     
  7. Morgain

    Morgain Well-Known Member

    Jake thank you this is SO delicious.

    I also moved the wiki tab with just small variations on your code help. The whole chunk places the forums and the wiki centrally on the bar as the most important areas of all. (On my board if you visit the forums are called COMMUNITY and the wiki is LIBRARY)

    Code:
    .navTabs .navTab.forums
    {
    margin-left: 20px;
    }
    .navTabs .navTab.forums .blockLinksList
    {
    margin-left: 250px;
    }
    .navTabs .navTab.wiki
    {
    margin-left: 270px;
    }
    .navTabs .navTab.wiki .blockLinksList
    {
    margin-left: 50px;
    }
     

Share This Page