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

komentar terkait navigasi evo yang gagal

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

navigasi yang menyatu ke wrapper

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

    navbar jadi full width namun header ada dibawah
  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 --> 
    memposisikan header berada diatas navigasi
  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

9 Responses to "Cara Membuat Menu Navigasi Evo Magz Full Width"

  1. Iya kang kalau dikomputer mah full tapi kalau dilaptop butut mah gak full, ahi hi hi.

    ReplyDelete
  2. yap bersyukur lah ada fitur inspect element :)

    ReplyDelete
  3. keren kang, tapi saya sendeiri masih belum tertarik utak atik template kang

    ReplyDelete
  4. Duh, 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.

    ReplyDelete
  5. bagus 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

    ReplyDelete
  6. tak 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

    ReplyDelete
  7. Beberapa hari gan sempat mampir ke blog ini ternyata makin banyak aja ilmu baru yang dibahas disini

    ReplyDelete
  8. gan, sudah saya tambah class untuk footer bawah, tapi kok gak mau full yaa

    ReplyDelete
    Replies
    1. pisahkan dulu dari wrapper yang awal... baru panggil classnya..

      Delete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin