그누보드 상위메뉴를 좀더 이쁘게 디자인

그누보드 기본 메뉴가 디자인이 빈약해서 

그누보드 상위메뉴를 fontawesome을 사용해서 좀더 이쁘게 눈에 띄게 디자인해 봤습니다.

테마/css/default.css에 삽입하시거나

테마/head.php에 삽입하시면 됩니다.

[code]

<style>

/* Enhanced menu text styles */

            .gnb_1da, .gnb_al_a {

                font-size: 18px !important;

                font-weight: 900 !important;

                color: #333 !important;

                text-transform: none !important;

                letter-spacing: -0.5px !important;

                transition: all 0.3s ease !important;

                padding: 8px 35px 8px 12px !important; /* Increased right padding */

                border-radius: 4px !important;

                position: relative !important;

            }

            /* New stylish arrow design */

            .gnb_al_li_plus .gnb_al_a:after,

            .gnb_1dli.gnb_al_li_plus .gnb_1da:after {

                content: '\f107' !important; /* FontAwesome arrow icon */

                font-family: 'FontAwesome' !important;

                position: absolute !important;

                right: 12px !important;

                top: 50% !important;

                transform: translateY(-50%) !important;

                font-size: 20px !important;

                transition: all 0.3s ease !important;

            }

            /* Arrow animation on hover */

            .gnb_1dli:hover .gnb_1da:after,

            .gnb_al_li_plus:hover .gnb_al_a:after {

                transform: translateY(-50%) rotate(-180deg) !important;

                color: #fff !important;

            }

            .gnb_2da {

                font-size: 16px !important;

                font-weight: 600 !important;

                color: #555 !important;                

                transition: all 0.3s ease !important;

                padding: 6px 10px !important;

                /*border-radius: 3px !important;*/

            }

            .gnb_1da:hover, .gnb_al_a:hover {

                color: #fff !important;

                background-color: #146eb4 !important;

                box-shadow: 0 2px 5px rgba(20, 110, 180, 0.2) !important;

            }

            .gnb_2da:hover {

                color: #146eb4 !important;

                background-color: #f0f7fd !important;

                padding-left: 15px !important;

            }

            </style>

[/code]