XF 1.2 Engadget like header?

[TheBigK]

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.

 

[TsinJu]

Please post a Picture or a URL

 

[AndreaMarucci]

This one?

http://www.engadget.com/

 

[TheBigK]

 

[TheBigK]

This one?

http://www.engadget.com/

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.

 

[AndreaMarucci]

I've done something like this on my forum (header and menu fixed) but I'm searching for a solution to have just the menu shown when you're scrolling down...

http://xenforo.com/community/threads/menu-bar-fixed.62990/#post-668604

 

[TheBigK]

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.

 

[Andy.N]

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.

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

 

[Stuart Wright]

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

 

[AndreaMarucci]

OMG! Beautiful!!!! I want it!

 

[AndreaMarucci]

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

 

[TheBigK]

@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]

@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]

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!

 

[Bram]

That engadget header looks very nice indeed. Put my on that list of persons that wants this as well

 

[Russ]

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

 

[AndreaMarucci]

I'll wait for your test since my css knowledge is absolutely less than basic

 

[Russ]

Well, here you guys go, a very rough draft of it , 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 .

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

 

[Matthew Hawley]

Well, here you guys go, a very rough draft of it , 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 .

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

I love you. (jk)

 

[DRE]

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.