Custom Top Menu Divi Theme dengan CSS

Divi Hack1 comment1399 Views

Melanjutkan seri membongkar trik custom Divi Theme dalam proyek website Attaraya, kali ini saya akan membahas bagaimana mengcustom #top-menu agar terlihat seperti desain UI yang diberikan oleh klien saya saat itu, untuk desain UI-nya bisa dilihat dibawah ini.

Saya akan mulai, pertama silahkan masuk ke Appearance > Menus. Silahkan buat menu baru, tulis nama menu misalkan Main Menu, setelah itu silahkan Save Menu. Isi menu tersebut sesuai kebutuhan misal seperti dibawah ini dan kemudian klik Save Menu lagi.

Saya akan menambahkan nama class “highlight-menu” untuk Get Quote, tapi sebelum menambahkan nama class tersebut silahkan aktifkan terlebih dahulu menu properti CSS Classes. Klik Screen Options dan centang CSS Classes.

Edit item menu Get Quote dan tambahkan class “highlight-menu” di form CSS Classes. Dan terakhir klik Save Menu.

Setelah itu klik tab Manage Locations dan pada Primary Menu pilih nama menu yang dibuat tadi, dalam hal ini Main Menu, dan klik Save Changes.

Dan lihat website anda, tampilan akan seperti dibawah ini

Untuk membuat tampilannya seperti menu di desain UI silahkan copy kode CSS dibawah ini ke Divi > Theme Options, letakkan kode CSS tersebut paling bawah untuk memudahkan tracking code suatu saat nanti, dan setelah itu klik Save Changes.

/* TOP MENU*/
.et_header_style_left #et-top-navigation nav>ul>li>a, .et_header_style_split #et-top-navigation nav>ul>li>a {
    padding-bottom: 0;
    margin-bottom: 20px;
}
#top-menu-nav>ul>li.highlight-menu>a {
    border: 2px solid #cb0000;
    border-radius: 50px;
    background-color: #FFF;
  color: #cb0000 !important;
}
#top-menu-nav>ul>li.highlight-menu>a:hover {
    border-color: #cb0000;
    background-color: #cb0000;
    color: #FFF !important;
}
#top-menu li a {
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 7px 13px !important;
    background-color: transparent;
}
#et-secondary-menu>ul>li>a:hover, #top-menu-nav>ul>li>a:hover {
    color: #cb0000 !important;
}
#top-menu li.current-menu-item a {
    border-color: rgba(0, 0, 0, 0.13);
    background-color: rgba(0,0,0,0.04);
}
#top-menu li{
    padding-right: 5px;
}
#et_top_search{
  margin-top:10px;
}

Tampilan akan seperti ini

Dan lihat kembali website anda, jika sukses tampilan akan seperti ini

Responsive

Untuk mengatur #top-menu agar bisa responsive menyesuaikan lebar layar monitor, silahkan tambahkan kode CSS dibawah ini dibawah kode tadi

/* RESPONSIVE TOP MENU */
@media (min-width: 981px) and (max-width: 1024px) {
  #top-menu li a {
    font-size: 14px;
    padding: 6px 9px!important;
  }
}
@media (max-width: 980px) {
  #et_top_search {
    margin-top: 0;
  }
}

Dan tampilan akan seperti ini

Penutup

Artikel ini selesai Insya Allah akan dilanjutkan membahas bagaimana membuat header cover yang bawahnya membentuk segitiga seperti pada desain UI diatas.

Terima kasih telah berkunjung di website saya dan semoga artikel ini membantu anda dalam meng-custom Theme Divi.

Artikel Terkait

Komentar

1 Comment

  1. Lepi

    Sangat Bermanfaat Gan Terima Kasih

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *