Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 16, 2013 at 2:45 pm #161695
    hojoon

    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.

    September 23, 2013 at 1:06 pm #165132
    hojoon

    Hi,

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

    Thanks & Regards,
    Hojoon

    September 24, 2013 at 8:42 pm #165819
    Devin

    Hi!

    You can remove the sub menu hover with:

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

    Regards,
    Devin

    September 25, 2013 at 7:07 am #165948
    hojoon

    HI, Devin

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

    Regards,
    Hojoon

    September 26, 2013 at 8:36 pm #166731
    Josue

    Hey!

    Regarding issue 2:

    
.main_menu ul:first-child > li > a {  
    display:block; 
    background:url(https://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(https://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_pollimolli_blue.png) no-repeat top; display:block; 
}

    Cheers,
    Josue

    September 26, 2013 at 8:39 pm #166732
    Josue

    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 11 years, 3 months ago by Josue.
    September 27, 2013 at 10:43 am #167087
    hojoon

    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

    September 27, 2013 at 6:32 pm #167232
    Josue

    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(https://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(https://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(https://interpeople.co.kr/wp/wp-content/uploads/2013/09/logo_menu_mini_color.png) no-repeat top; display:block;
}

    Cheers!
    Josue

    September 28, 2013 at 7:00 am #167443
    hojoon

    Dear Josue

    Great! It works well.
    Thank you so much.

    Best regards,
    Hojoon

    September 28, 2013 at 7:24 am #167447
    Josue

    Glad we could help.

    Regards,
    Josue

  • Author
    Posts
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.