Dalam mendesign sebuah wordpress themes, baik itu yang akan digunakan untuk template blog, corporate dan juga Toko Online yang sedang kita pelajari sekarang ini dibutuhkan kreativitas yang bisa dikatakan cukup lumayan tinggi. Hal in tentunya akan berpengaruh terhadap hasil yang akan kita dapatkan nantinya.

Karena proses mendesign ini sangat – sangat fleksible maka ketika anda mempelajari hal ini kemungkinan besar ide design dari kami tidak sesuai dengan yang anda inginkan. Contoh kecil misalnya kami memilih warna background template yang kami punya berwarna biru karena kami menyukai warna biru , anda boleh memberikan warna yang lain sesuai dengan apa yang anda inginkan.

Yang terpenting disini adalah anda mendapatkan pengetahuan dan trik – trik dalam mendesign template. Jika anda mempunyai trik dan basic lain sebelumnya ( misalnya masalah CSS ) anda bisa menerapkannya secara langsung dan tidak perlu terpengaruh oleh kami karena bisa saja hasil yang anda dapatkan bisa lebih bagus dari yang kami punyai.

Silahkan anda baca juga : Part 1, Part 2, Part 3, Part 4 , Part 5  , Part 6 , Part 7  dan Part 8 sebelum anda membaca cara membuat template toko online part 9 ini.

Mari kita lanjutkan lagi proses mendesign template toko online kita. Kali ini kita akan mereposisikan dan mengkustomisasi CSS Menu utama yang ada dibawah logo menjadi berada pada sebelah kanan atas.

Jadi target kita nantinya menu tersebut atau Navigasi pada template kita akan terlihat seperti pada gambar berikut ini.

 Live Demo

Hal ini bertujuan agar tinggi area header template kita bisa kita kurangi dan sekaligus jika orang mengakses halaman homepage toko online kita bisa langsung melihat slider yang ada di toko online kita secara full dan tidak terpotong dibagian bawahnya.

Bukalah file custom.css yang telah kita buat pada tahap sebelumnya di Notepad++ anda karena kita akan membutuhkannya.

Lokasi file tersebut berada pada folder css yang tentunya anda masih ingat dimana posisi folder css pada themes anda. Lihat pada bagian atas pada gambar dibawah ini

Pastikan anda membuka file yang benar dengan memperhatikan juga gambar berikutnya dibawah ini.

Setelah anda membuka file custom.css tersebut sekarang lanjutkan dengan membuka halaman Homepage template toko online anda yang ada di localhost dan kemudian jalankan firebug anda juga hingga terlihat seperti pada gambar berikut ini.

Dengan kondisi seperti yang terlihat pada gambar diatas maka kita sudah siap untuk melakukan kustomisasi pada Menu atau Navigasi  utama pada template kita.

Sekarang fokuslah pada panel sebelah kiri ( HTML ) dan bukalah seperti yang terlihat pada gambar berikut ini

Klik pada baris kode <ul id=”menu-home“ class=”nav top-nav clearfix“>

Setelah posisinya sudah ter-highlights atau tersorot seperti pada gambar diatas maka kita sudah berada pada posisi kode Navigasi utama template yang kita buat ini.

Tips : Untuk memastikan posisi anda benar, letakkan kusor mouse anda diatas kode 

 maka anda akan melihat hal yang sama dengan yang terdapat pada tanda panah yang pertama . Lihat kembali gambar diatas ( Menu di template kita terhighlights juga )

Sekarang silahkan anda fokus pada panel sebelah kanan ( CSS ) dan dengan cara biasa kita akan menambahkan kode pengaturan baru untuk Menu atau Navigasi tersebut supaya terlihat sesuai dengan apa yang kita inginkan.

Klik kanan pada area yang kosong ( Tanda X ) dan kemudian klik Add Rule

Selanjutnya anda akan melihat sebuah Rule baru yang khusus untuk mengatur navigasi utama pada template kita tersebut.

Sekarang double click pada area kosong setelah tulisan .nav .top-nav .clearfix { lihat yang bertanda X dibawah ini

Setelah itu anda akan melihat baris area baru tempat untuk memasukkan kode CSS. Lihat tanda panah pada gambar diatas supaya anda lebih jelas lagi.

Ternyata setelah kita menambahkan kode CSS untuk warna background menjadi transparan maka Menu atau Navigasi template kita jadi pendek dan terlihat sebatas menu terakhir saja.

Lihat gambar dibawah ini untuk memahami keterangan dari kami diatas

Selanjutnya kita akan membuat Navigasi tersebut bergeser ke sebelah kanan. Posisi saat ini Navigasi tersebut berada di sebelah kiri.

Cara untuk membuat Navigasi tersebut berpindah ke sebelah kanan sangat amat mudah sekali. Silahkan anda tulis dibawah kode background-color diatas seperti ini : float: right;

Secara dari dekat maka penambahan kode css nya menjadi seperti ini

Selanjutnya setelah posisinya Navigasi menu tersebut berada disebelah kanan, kita akan membuat posisinya naik keatas. Untuk menaikkan posisi Navigasi tersebut keatas kita akan memakai kode Margin.

Ketikkan dibawah kode float: right; tersebut seperti ini margin-top: -135px;

Cukup mudah bukan untuk membuat Navigasi tersebut menjadi keatas ? Karena perubahan yang kita inginkan sudah bisa kita lakukan maka selanjutnya kita akan memasukkan kode css yang baru kita buat tersebut kedalam file custom.css

Untuk memasukkan kode css tersebut kedalam file custom.css kita akan melakukannya dengan cara copy paste saja. Klik kanan pada tulisan .nav .top-nav .clearfix kemudian klik Copy Rule Declaration

Dengan cara ini kita tentunya tidak perlu mengetik ulang secara manual karena jika kita ketik secara manual kemungkinan kita mengalami salah ketik akan besar dan kita tidak menginginkan hal itu terjadi.

Buka kembali Notepad++ anda yang sudah berisi file custom.css diatas. Pastekan pada bari ke 6, lihat gambar dibawah ini.

Samakan kode css anda dengan kode css punya kami berikut ini.

Simpan perubahan tersebut dengan cara menekan CTRL + S pada keyboard anda.

Sekarang mari kita lihat perubahan yang kita lakukan tersebut dengan cara me-refresh webbrowser kita masing – masing.

Jika yang anda lakukan sudah sesuai dengan petunjuk kami maka anda akan melihat hal yang sama dengan gambar berikut ini.

Selamat anda telah berhasil melakukan perubahan posisi menu atau navigasi template wordpress yang sedang anda buat. Pada kesempatan mendatang kami akan melanjutkan lagi dengan kustomisasi yang lainnya.

Semoga tutorial ini bisa bermanfaat bagi anda. Good Luck