Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #161695

    Hi dear

    I want to make image menu instead of words, which have hover and active effect.

    Below is my website.

    http://interpeople.co.kr/wp/

    I used custom css as below,

    —————————————————————————————————————————
    .main_menu ul:first-child > li > a {
    display:block;
    background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_bg_grey.png) no-repeat top;
    }
    .main_menu ul:first-child > li a:hover,
    .main_menu ul:first-child > li.current-menu-item > a,
    .main_menu ul:first-child > li.current_page_item > a,
    .main_menu ul:first-child > li.active-parent-item > a,
    .main_menu ul:first-child > li.active-parent-item > a {
    background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_pollimolli_blue.png) no-repeat top; display:block;
    }
    ————————————————————————————————————————————————-

    Now, hover and active are well done.
    But I have two problems.

    1) I want to use different background image for hover and active in each menu.
    I tried to use menu id, but it did not work. ( ex: #menu-item-3964 .main_menu ul:first-child > li > a)

    2) I don’t want show this background image in sub-menu; you can find blue color background when you hover on sub-menu.

    I need your help.

    Thanks in advance.

    #165132

    Hi,

    My header type is;
    Non-fixed Header with Social icons and additional Navigation

    Thanks & Regards,
    Hojoon

    #165819

    Hi!

    You can remove the sub menu hover with:

    #top .main_menu .menu li:first-child>a {
    border-top: none;
    }

    Regards,
    Devin

    #165948

    HI, Devin

    Thanks for your reply.
    But, your code cannot resolve my problem.
    Please check my first inquiry carefully.

    Regards,
    Hojoon

    #166731

    Hey!

    Regarding issue 2:

    
    .main_menu ul:first-child > li > a {  
        display:block; 
        background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_bg_grey.png) no-repeat top;      
    }
    .main_menu ul:first-child > li > a:hover,
    .main_menu ul:first-child > li.current-menu-item > a, 
    .main_menu ul:first-child > li.current_page_item > a,
    .main_menu ul:first-child > li.active-parent-item > a,
    .main_menu ul:first-child > li.active-ancestor-item > a {
        background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_pollimolli_blue.png) no-repeat top; display:block; 
    } 

    Cheers,
    Josue

    #166732

    Hello!

    Regarding issue 1, you must use a selector like this one (target the li):

    #menu-item-3964 a{
        background: url(...);
    }

    Cheers!
    Josue

    • This reply was modified 6 months, 3 weeks ago by  Josue.
    #167087

    Dear Josue

    Thanks a lot for your support!
    I have solved issue 2.

    But I cannot solve issue 1 until now.

    According to your advise, I used ID selector as below.
    But it does not work.

    ———————————————————————————————————————————
    /*PolliMolli*/
    #menu-item-3964 .main_menu ul:first-child > li > a:hover,
    #menu-item-3964 .main_menu ul:first-child > li.current-menu-item > a,
    #menu-item-3964 .main_menu ul:first-child > li.current_page_item > a,
    #menu-item-3964 .main_menu ul:first-child > li.active-parent-item > a,
    #menu-item-3964 .main_menu ul:first-child > li.active-ancestor-item > a {
    background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_pollimolli_blue.png) no-repeat top; display:block;
    }

    /*zflex*/
    #menu-item-2567 .main_menu ul:first-child > li > a:hover,
    #menu-item-2567 .main_menu ul:first-child > li.current-menu-item > a,
    #menu-item-2567 .main_menu ul:first-child > li.current_page_item > a,
    #menu-item-2567 .main_menu ul:first-child > li.active-parent-item > a,
    #menu-item-2567 .main_menu ul:first-child > li.active-ancestor-item > a {
    background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_zflex_black.png) no-repeat top; display:block;
    }

    /*MINI*/
    #menu-item-2570 .main_menu ul:first-child > li > a:hover,
    #menu-item-2570 .main_menu ul:first-child > li.current-menu-item > a,
    #menu-item-2570 .main_menu ul:first-child > li.current_page_item > a,
    #menu-item-2570 .main_menu ul:first-child > li.active-parent-item > a,
    #menu-item-2570 .main_menu ul:first-child > li.active-ancestor-item > a {
    background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_mini_color.png) no-repeat top; display:block;
    }
    ———————————————————————————————————————————

    Would you mind let me know correct full codes?

    Best regards,
    Hojoon

    #167232

    Hey Hojoon!

    Try with this:

    /*PolliMolli*/
    #menu-item-3964 > a:hover,
    #menu-item-3964.current-menu-item > a,
    #menu-item-3964.current_page_item > a,
    #menu-item-3964.active-parent-item > a,
    #menu-item-3964.active-ancestor-item > a {
    background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_pollimolli_blue.png) no-repeat top; display:block;
    }
    
    /*zflex*/
    #menu-item-2567 > a:hover,
    #menu-item-2567.current-menu-item > a,
    #menu-item-2567.current_page_item > a,
    #menu-item-2567.active-parent-item > a,
    #menu-item-2567.active-ancestor-item > a {
    background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_zflex_black.png) no-repeat top; display:block;
    }
    
    /*MINI*/
    #menu-item-2570 > a:hover,
    #menu-item-2570.current-menu-item > a,
    #menu-item-2570.current_page_item > a,
    #menu-item-2570.active-parent-item > a,
    #menu-item-2570.active-ancestor-item > a {
    background:url(http://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_mini_color.png) no-repeat top; display:block;
    }

    Cheers!
    Josue

    #167443

    Dear Josue

    Great! It works well.
    Thank you so much.

    Best regards,
    Hojoon

    #167447

    Glad we could help.

    Regards,
    Josue

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘How to make image menu in header which have hover and active effect?’ is closed to new replies.