• 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?

TheBigK

Well-known member
#1
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.
 

TheBigK

Well-known member
#7
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.
 

Stuart Wright

Well-known member
#13
@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?
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.
 

Russ

Well-known member
#16
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:

Russ

Well-known member
#18
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
 

Attachments

#19
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
I love you. :love:(jk)
 

DRE

Well-known member
#20
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.