[Hỏi] Tạo navbar giống timeline facebook bằng css?

Chào mọi người. Mình(không biết gì về code) muốn chỉnh thanh Navbar giống như của Tinhte.vn hoặc timeline của facebook. Diễn đàn của mình là http://www.rybakies.net
Style mình dùng là modified child theme của UI.X phiên bản 1.4.3 mới nhất. Trong hình là giải thích rõ hơn cho câu hỏi của mình.

• Số 1 là dạng float mặc định có sẵn trong Style properties, mình đã tắt đi vì đôi lúc nó không hoạt động.
• Số 2 là kết quả sau khi mình dùng code này lắp vào phần css của Navigation Tabs Container trong Header and Navigation:
  Code:

  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0;
  z-index: 999;

  Như các bạn thấy đấy, nó có hiệu quả nhưng chưa hoàn thiện.
• Số 3: mình dùng photoshop dựng lên, đây mới là kết quả mà mình mong muốn.

Rất mong mọi người giúp đỡ mình, tất nhiên là vì mình không biết là không có search được nên mới hỏi. Chúc cộng đồng vxf.vn luôn sôi nổi và nhiệt tình. Cảm ơn mọi người rất nhiều.

​

Cập nhật: đã thành công. Làm theo #7 và thêm css như mình ở trên là được nhé các bạn.
Cảm ơn bác @dev.xf (congngheaz.com) đã nhiệt tình giúp đỡ Cũng không quên cảm ơn các bác @Lightness, @thanhthanh cũng đã giúp đỡ mình

 

@Lightness @vandieutot ai đó giúp mình với!

 

CHào bạn cái thanh này mình được tích hợp sẵn trong giao diện rồi. Cách làm bạn thử xem có ai biết không mình xin chịu câu này.

 

Tích hợp sẵn thì nó chỉ rộng bằng pagewidth như trong hình số 1 thôi bạn, và cũng không có chỗ chỉnh(hoặc mình chưa biết). Mình muốn nó như hình số 3 cơ

 

Mở navigation.css lên
tìm

Code:

.navTabs .publicTabs {
    float: left;
}

Thay bằng

Code:

.navTabs .publicTabs {
    float: left;
    padding-left: 90px;
}

tìm

Code:

.navTabs .visitorTabs {
    float: right;
}

Thay bằng

Code:

.navTabs .visitorTabs {
    float: right;
    padding-right: 90px;
}

 

Đúng là bạn ko biết gì về code thật
mình giúp bạn thế này
thứ nhất bạn thêm đoạn này vào navigation.css

Code:

#navigation {
background: none repeat scroll 0 0 rgb(77, 182, 172);
position: fixed;
width: 100%;
z-index: 999;
}
#logoBlock {
padding-top: 48px;
}

Tìm đoạn

Code:

.navTabs {
    background-clip: content-box;
    background-color: rgb(77, 182, 172);
    border-color: rgb(226, 226, 226);
    border-radius: 0;
    box-sizing: border-box;
    font-size: 14px;
    height: 42px;
    left: 0 !important;
    position: fixed !important;
    right: 0;
    top: 0 !important;
    z-index: 999;
}

Thay bằng

Code:

.navTabs {
    background-color: rgb(77, 182, 172);
    border-color: rgb(226, 226, 226);
    border-radius: 0;
    font-size: 14px;
    height: 42px;
    top: 0;
}

có gì pm mình giúp nhé. Mà Css trên chuẩn rồi đó. có gì ghé thăm congngheaz ủng hộ mình

 

3 thằng 3 đáp án

 

nhìn qua thấy của bác ko giải quyết dc vấn đề

 

Cảm ơn mọi người đã giúp đỡ. Mình đang thử cả 3 cách, sẽ review lại cho mọi người

 

Cập nhật 1: Cách của bác @thanhthanh không hoạt động được.

 

Của em thì khi responsive sẽ ko chuẩn vì chỉ chuẩn nếu màn hình 1366 còn nếu nhỏ hơn thì nav bị thụt vào trong. nếu lớn hơn thì nav vẫn trồi ra ngoài
=> của anh chuẩn nhất

 

mình ko thử nhưng mình nhìn là thấy ko ổn vì theo css của bạn nav sẽ ko full 100% site

 

làm cái của mình đi bạn

 

Mình test trên localhost cho nhanh
Cập nhật 2: cách của @Lightness thì có hoạt động được nhưng bị lỗi khi responsive

 

Cái đó mình nói ở trên rồi mà