XF 1.2 Engadget like header?

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.
 

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.
 

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?
 

Stuart Wright

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

TheBigK

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.
Thanks!
 

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:

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
 

Attachments

Matthew Hawley

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

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.
 
Top