Cara Menciptakan Sajian Navigasi Evo Magz Full Width

Beberapa waktu sebelumnya Saya sedikit Iseng – Iseng Modifikasi Template Evo Magz menyerupai yang gres – gres 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 Teknik Membuat Navigasi Menu Template Evo Menyatu Kesamping namun balasannya tidak memuasakan dimana navigasi spesialuntuk terlihat full pada layar square. Semua itu Saya sadari sehabis salah satu blogger berkomentar bahwa navigasinya masih terlihat ada jarak dilayar komputer yang dipakainya

Saya sendiri tidak paham dan tidak begitu ahli, Saya spesialuntuk mendengar, melihat,  memalsukan kemudian mencoba mempratikannya kedalam template lain.  Untuk itu kali ini Saya akan mencoba kembali mengulas wacana bagaimana semoga navigasi sajian 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 alasannya headernya juga berada dibawah wrapper, jikalau tidak dipindahkan nanti headernya jadi berada dibawah navaigasi.
 
Berikut ini yakni Teknik Membuat Navigasi Menu Evo Magz Full Width

1. Seperti biasa masuk kedalam mode HTML 
2. Cari instruksi Navigasi, copy dari  <nav class='dropdowns'> hingga dengan </nav> kemudian  pindahkan sempurna ke bawah <-- navbar sajian end --> 
3. Bila sudah dipindahkan maka nanti posisinya akan berada diatas header menyerupai yang telihat pada gambar dibawah ini
   
   
   
4. Supaya headernya jadi diatas navigasi maka carilah instruksi header wrapper, copy kodenya dari <header id='header-wrapper'> hingga </header> dan pindahkan ketas instruksi navigasi atau sempurna dibawah <-- navbar sajian end --> 
   
5. Bila header yang ada sudah Anda rubah, maksudnya headernya sudah dirubah ketengah memakai class header right maka Anda perlu melaksanakan perubah ke css pada header semoga posisinya terlihat center pada tiruana layar dengan mengubah margin kanan dan kirinya menjadi auto, kurang lebih nanti susunan css jadi menyerupai diberikut
   
   .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 menyerupai pada halaman diberikut --> LIHAT DEMO

*Tambahan 
Jangan lupa buat class gres misal menyerupai diberikut 

.wrapper {
    max-width: 1180px;
    margin: 0 auto;
}

Class tersebut nanti sanggup dipanggil atau dijalankan dalam sajian navigasi misal jadi menyerupai diberikut  

<nav class='dropdowns'><div class ='wrapper'> ...........</div></nav> 
menambahkan juga ke bab header, class diatas juga sanggup dimenambahkan ke bab footer semoga jadi full width 

Selamat mencoba, tidakboleh lupa koreksi dan masukannya barangkali pada layar mitra - mitra 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, semoga footer full width Anda perlu memisahkannya dari wrapper dan membuat properti css gres untuk footer semoga ukurannya jadi full width

Share :