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

XF 1.2 Extend the selected tab to the top

Discussion in 'Styling and Customization Questions' started by Matthew Hawley, Jul 27, 2013.

  1. Matthew Hawley

    Matthew Hawley Well-Known Member

    [​IMG]

    So i have this here. I want to extend the background to the top. No matter what i do i cant fix it. Ive tried margins, padding and height. Sorry about the lack of info, im on my mobile. I cant connect to xenforo on my laptop.
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    Some code or a link will go a long way with anyone trying to help you.
     
  3. Matthew Hawley

    Matthew Hawley Well-Known Member

    I can't because I'm on my mobile. Xenforo. Com is the only website I can't connect to on my laptop.
     
  4. Matthew Hawley

    Matthew Hawley Well-Known Member

  5. Shelley

    Shelley Well-Known Member

    Not getting into this thread too much but try the following. you may need to add some !importants to it.

    Code:
    .navTabs .navTab.selected .navLink {
    bottom: 12px;
    height: 50px;
    line-height: 48px;}
    
    The output of that is as follows (below)

    Screenshot_3.png

    If you want it more flush at the top then add this css instead.

    Code:
    .navTabs .navTab.selected .navLink {
    bottom: 14px;
    height: 52px;
    line-height: 50px;
    
    }
    
    The output of that css is as follows:
    Screenshot_4.png
     
    Matthew Hawley and MattW like this.
  6. Matthew Hawley

    Matthew Hawley Well-Known Member

    That fixes the problem with the navtab, but now theres a large space between the page content and the navigation.
     
  7. Shelley

    Shelley Well-Known Member

    You just changed the style. o_O Anyhow, Someone else can take over it's not a big issue to resolve. :)
     
  8. Matthew Hawley

    Matthew Hawley Well-Known Member

    Huh? What do you mean i just changed the style?
     
  9. Shelley

    Shelley Well-Known Member

    Try adding

    Code:
    
    #header {
    height: 101px;}
     
    Matthew Hawley likes this.

Share This Page