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

XF 1.2 Navigation and Sub-links bars extending full width

Discussion in 'Styling and Customization Questions' started by Chi Bearhawks, Aug 8, 2013.

  1. Chi Bearhawks

    Chi Bearhawks Member

    How do I get my sub-links and navigation bars to extend the full width of the page? I still want the content inside to keep my Width value as the rest of my page though, of course.

    Also, I see the option to define the height of the navigation tabs, but this makes the sub-links part take on the same height as well. How do I differentiate between the two? I'd like my sub-links bar to be shorter in height.
     
  2. Shelley

    Shelley Well-Known Member

    couldn't you add something like the following in extra.css of course depending on the amount of links you have. That being said I'm quite sure that the tablinks in other area differ in the amount of links that are present so you may need to specify the code more exactly which would be more trouble than it's worth.

    Code:
    .navTabs .navTab.selected .tabLinks li {
    
    width: 19%;
    }
     
  3. Chi Bearhawks

    Chi Bearhawks Member

    What I mean is something like this:

    [​IMG]

    Where the navigation bars on the top will extend the full width of the page, while all the content inside of it is kept within the normal pageWidth dimension.
     
  4. Chi Bearhawks

    Chi Bearhawks Member

    Anyone know how to do this?
     
  5. mistypants

    mistypants Well-Known Member

    This is how I did it for a style I'm working on. Might not be the cleanest way to accomplish it, but it's worked for me without any issues so far.

    In Style Properties > General > Page Width Controller, first take note of what you have for your right & left margins. The default is 1%. Change them to 0 once you've committed what you were using to memory. You might also want to set the right & left padding to 0 (default is 5px).

    Now your forum will be full width (no margins or padding). To set everything below the navigation back to what it was, you can go to Style Properties > General > Content and enter your right & left margins from before (so if I was using the aforementioned default 1%, I'd enter 1%).

    The navigation bars will now be full width while everything below has the standard margins. Note that this will also shove your logo off completely to the left, but it's easy to move it over a bit via CSS.
     
    Impulse likes this.

Share This Page