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

Navigation Modification

Discussion in 'Styling and Customization Questions' started by Dynamic, Mar 12, 2012.

  1. Dynamic

    Dynamic Well-Known Member

    Hi there,

    I am just wondering how to get the default navigation (on the default skin) to go right up to the top of the page, and stretch 100%. I would like the forums to remain as they are (width), but I would like the navigation to move to the top of the page.

    Thanks.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Set the header to 0 height:

    Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Height of Header Logo

    Then edit this template:

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

    Add this code to change the width of the nav area:

    Code:
    #header .pageWidth
    {
    	margin: auto;
    	width: 1200px;
    }
    
     
  3. Dynamic

    Dynamic Well-Known Member

    Awesome!

    Thanks for that :D I have another question though. How do I center the content in the navigation? It is all on the far left and far right, and I would like to make it in line with the rest of the forums.

    Thanks :)
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Try this:

    Code:
    #header .pageWidth
    {
    	margin: auto;
    	width: 100%;
    }
    
     
  5. Dynamic

    Dynamic Well-Known Member

    Nope, didn't work dude. Any other ideas? By that way, YOU ARE THE MAN!!
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Isn't that how it is by default? Before you expanded the navbar?
     
  7. Dynamic

    Dynamic Well-Known Member

    Nah dude, it was all in line before. Pretty much exactly how it is on this site, but now since I moved the navbar it is displaying everything on the far left and far right. I can PM you if you like?
     
  8. Dynamic

    Dynamic Well-Known Member

    Okay I fixed it. I deleted the code in extra.css and applied a background images that blended in with the navigation. Now it gives the illusion it makes it's way across the whole page.

    Thanks heaps for your help dude! You're the man!
     

Share This Page