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

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

1. Seperti biasa masuk kedalam mode HTML 
2. Cari kode Navigasi, copy dari  <nav class='dropdowns'> sampai dengan </nav> kemudian  pindahkan tepat ke bawah <-- navbar menu end --> 
3. Bila sudah dipindahkan maka nanti posisinya akan berada diatas header seperti yang telihat pada gambar dibawah ini
   
   
   
4. 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 --> 
   
5. 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

*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

PLEASE SHARE

Share it Share it Tweet Share it Pin it

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