Cara Membuat Menu Navigasi Evo Magz Full Width
Beberapa waktu sebelumnya Saya sedikit Iseng – Iseng Modifikasi Template Evo Magz seperti yang baru – baru ini Saya mencoba memindahkan header template Evo Magz ketengah dan menghapus dan memindahkan form search yang berada navigasi kebawah header.
Selanjutnya Saya mencoba membuat navigasi evo jadi full width kesamping pada artikel Cara Membuat Navigasi Menu Template Evo Menyatu Kesamping namun hasilnya tidak memuasakan dimana navigasi hanya terlihat full pada layar square. Semua itu Saya sadari setelah salah satu blogger berkomentar bahwa navigasinya masih terlihat ada jarak dilayar komputer yang dipakainya
Selanjutnya Saya mencoba membuat navigasi evo jadi full width kesamping pada artikel Cara Membuat Navigasi Menu Template Evo Menyatu Kesamping namun hasilnya tidak memuasakan dimana navigasi hanya terlihat full pada layar square. Semua itu Saya sadari setelah salah satu blogger berkomentar bahwa navigasinya masih terlihat ada jarak dilayar komputer yang dipakainya
Saya sendiri tidak paham dan tidak begitu mahir, Saya hanya mendengar, melihat, meniru lalu mencoba mempratikannya kedalam template lain. Untuk itu kali ini Saya akan mencoba kembali membahas tentang bagaimana supaya navigasi menu evo magz menjadi full width dengan cara memisahkan navigasinya dari id wrapper. Perhatikan screenshoot dibawah ini
Kalau diperhatikan navigasinya memang ada dibawah id wrapper sehingga pantas saja meskipun dirubah berkali – kali cssnya tetap saja Saya tidak bisa. Jika Navigasinya dipisahkan dari wrapper berarti otomatis headernya juga harus dipindahkan karena headernya juga berada dibawah wrapper, kalau tidak dipindahkan nanti headernya jadi berada dibawah navaigasi.
Berikut ini adalah Cara Membuat Navigasi Menu Evo Magz Full Width
- Seperti biasa masuk kedalam mode HTML
- Cari kode Navigasi, copy dari <nav class='dropdowns'> sampai dengan </nav> kemudian pindahkan tepat ke bawah <-- navbar menu end -->
-
Bila sudah dipindahkan maka nanti posisinya akan berada diatas header seperti yang telihat pada gambar dibawah ini
-
Supaya headernya jadi diatas navigasi maka carilah kode header wrapper, copy kodenya dari <header id='header-wrapper'> sampai </header> dan pindahkan ketas kode navigasi atau tepat dibawah <-- navbar menu end -->
- Bila header yang ada sudah Anda rubah, maksudnya headernya sudah dirubah ketengah menggunakan class header right maka Anda perlu melakukan perubah ke css pada header supaya posisinya terlihat center pada semua layar dengan mengubah margin kanan dan kirinya menjadi auto, kurang lebih nanti susunan css jadi seperti berikut
.header-right {
float: right;
padding: 0;
overflow: hidden;
margin: 15px auto 5px;
width: 72.8%;
max-width: 100%;
}
Sehingga secara keseluruhan nanti posisi header dan navigasinya akan terlihat seperti pada halaman berikut --> LIHAT DEMO
*Tambahan
Jangan lupa buat class baru misal seperti berikut
.wrapper {
max-width: 1180px;
margin: 0 auto;
}
Class tersebut nanti bisa dipanggil atau dijalankan dalam menu navigasi misal jadi seperti berikut
<nav class='dropdowns'><div class ='wrapper'> ...........</div></nav>
tambahkan juga ke bagian header, class diatas juga bisa ditambahkan ke bagian footer supaya jadi full width
Selamat mencoba, jangan lupa koreksi dan sarannya barangkali pada layar teman - teman tampilannya tidak full width
*Tambahan
Jangan lupa buat class baru misal seperti berikut
.wrapper {
max-width: 1180px;
margin: 0 auto;
}
Class tersebut nanti bisa dipanggil atau dijalankan dalam menu navigasi misal jadi seperti berikut
<nav class='dropdowns'><div class ='wrapper'> ...........</div></nav>
tambahkan juga ke bagian header, class diatas juga bisa ditambahkan ke bagian footer supaya jadi full width
Selamat mencoba, jangan lupa koreksi dan sarannya barangkali pada layar teman - teman tampilannya tidak full width
*Note
Bila header dan form searchnya belum dirubah menjadi ketengah, maka Anda tidak perlu mengatur class header-right, jadi Anda cukup memindahkan, atau memisahkannya dari wrapper. Begitupun untuk id footer yang terdapat dalam template, supaya footer full width Anda perlu memisahkannya dari wrapper dan membuat properti css baru untuk footer supaya ukurannya jadi full width
Bila header dan form searchnya belum dirubah menjadi ketengah, maka Anda tidak perlu mengatur class header-right, jadi Anda cukup memindahkan, atau memisahkannya dari wrapper. Begitupun untuk id footer yang terdapat dalam template, supaya footer full width Anda perlu memisahkannya dari wrapper dan membuat properti css baru untuk footer supaya ukurannya jadi full width
Ahmad Zaelani
Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple
Iya kang kalau dikomputer mah full tapi kalau dilaptop butut mah gak full, ahi hi hi.
ReplyDeleteyap bersyukur lah ada fitur inspect element :)
ReplyDeletekeren kang, tapi saya sendeiri masih belum tertarik utak atik template kang
ReplyDeleteDuh, saya merasa bloon kalo udah ngomongin masalah kode-kodean komputer. Duh nyerah aja deh, hahaha. Yang jago di rumah malah adek cewek. Yaudah kalo ada apa-apa biar dia yang benerin. Saya cukup ngeliat sambil ngopi.
ReplyDeletebagus juga Mas...Menu Navigasi jika di edit agar menjadi Full Width , tapi kalau saya perhatikan screntshotnya kok tidak ada perbuahan pada menu ya ...apa penglihatan saya yang kurang teliti
ReplyDeletetak lihat demonya agar nggak mati paham apa yang dimaksudkan dengan evo magz full width, dan setelahnya jadi ngerti dah maksud dari sajian kali ini mah...bagus nggak yah kalau dipasangin di blog DESA CILEMBU...mohon pendapatnya geura geh
ReplyDeleteBeberapa hari gan sempat mampir ke blog ini ternyata makin banyak aja ilmu baru yang dibahas disini
ReplyDeletegan, sudah saya tambah class untuk footer bawah, tapi kok gak mau full yaa
ReplyDeletepisahkan dulu dari wrapper yang awal... baru panggil classnya..
Delete