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

XF 1.2 Engadget like header?

Discussion in 'Styling and Customization Questions' started by TheBigK, Nov 20, 2013.

  1. TheBigK

    TheBigK Well-Known Member

    I really like the header engadget has launched with their new blog design. I believe the logo & the entire header area unnecessarily occupies a lot of area.

    It'd be great if someone could post the custom CSS to have a header like engadget on xenForo.
    Bram and Andy.N like this.
  2. TsinJu

    TsinJu Well-Known Member

    Please post a Picture or a URL
  3. AndreaMarucci

    AndreaMarucci Well-Known Member

  4. TheBigK

    TheBigK Well-Known Member

  5. TheBigK

    TheBigK Well-Known Member

    That's right.

    I think that's a good header design with menu aligned with the logo and the search box is in line. It's a huge space saver. It'd be great if the menu can scroll like it does on engadget.
  6. AndreaMarucci

    AndreaMarucci Well-Known Member

  7. TheBigK

    TheBigK Well-Known Member

    Thanks @AndreaMarucci. I'm looking for CSS tweaks that'd put my navigation tabs next to the logo; just like Engadget does. I'd also want search box and 'Sign Up/ Log In' links at the end.
  8. Andy.N

    Andy.N Well-Known Member

    I thought AVForum run by @Stuart Wright has this kind of header so it's possible to do it for XF styles.
  9. Stuart Wright

    Stuart Wright Well-Known Member

    If you want a header like we have at www.avforums.com (actually our members have a choice of three styles of header) then you should talk to Mike @Audentio
    mikelowrey, Tracy Perry and LPH like this.
  10. AndreaMarucci

    AndreaMarucci Well-Known Member

    OMG! Beautiful!!!! I want it!
  11. AndreaMarucci

    AndreaMarucci Well-Known Member

    I would pay for such a header but I'd like to preserve my theme. If @Audentio is planning to do an addon to have such a result, I'm the first in line... :love:
    mikelowrey likes this.
  12. TheBigK

    TheBigK Well-Known Member

    @Stuart Wright - I totally like what Mike' from Audiento has done for AVForums. Is there any special reason you decided to keep the login/signup button above the menu bar?
  13. Stuart Wright

    Stuart Wright Well-Known Member

    Because that's where the designers designed it (with some guidance from us). We also have other elements which go in the top. The drop-down menu from the Bookmarks addon plus a drop-down of items stored in a users' product comparison set.
  14. TheBigK

    TheBigK Well-Known Member

  15. Bram

    Bram Well-Known Member

    That engadget header looks very nice indeed. Put my on that list of persons that wants this as well :)
    mikelowrey likes this.
  16. Russ

    Russ Well-Known Member

    It's actually much easier than you may think for the engadget header.

    Basic concept of it if someone wanted to play with it:
    • Modify header template move include nav above logo remove quick search from that template as well
    • Modify navigation template add a div wrapper around the entire thing(set a background color + width 100% + height of the navigation + add position: fixed, top 0
    • Add in search into the navigation template so it'll scroll with it
    • Apply I think it's Audentio's modification give selected navs a dropdown(also in the process remove the sub nav)
    And bingo(somewhat haha) it's done. Might be a good idea to use Sheldons userbar font awesome replacement to save some space too. I'm in the middle of some clients, but I could always try to do something like it afterwards, or a tutorial.

    Of course there's much more css to it :D
    Last edited: Nov 21, 2013
    Alien, TheBigK, AndreaMarucci and 2 others like this.
  17. AndreaMarucci

    AndreaMarucci Well-Known Member

    I'll wait for your test since my css knowledge is absolutely less than basic :censored:
  18. Russ

    Russ Well-Known Member

    Well, here you guys go, a very rough draft of it :D, not going to provide support on this currently, I whipped this up in about 10 minutes. It's the stock style so it is more for reference than anything :D.

    One version uses javascript to adjust the navigation when it scrolls past the moderator bar.

    One version uses simply a fixed position on the nav bar + pushes the moderator bar to the bottom.

    Off to bed, enjoy :D

    Attached Files:

    TsinJu, TheBigK and Matthew Hawley like this.
  19. Matthew Hawley

    Matthew Hawley Well-Known Member

    I love you. :love:(jk)
  20. DRE

    DRE Well-Known Member

    Reminds me of 8thos Bar which was in turn, inspired by Facebook. So more like... engadget was probably inspired by Facebook. Even digg and other sites followed their suit. I prefer this. I don't use floating nav bars anymore tho. That's why I ain't updated that resource.

Share This Page