Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #490853

    Hey, first: thanks for all the help, it looks so great!

    How to change hover style on menu? We added Icons to the menu and moved each image above menu text. Added a screen, this dosent looks great, maybe we can fix that, to fit hover to menu text.

    Here some code

    /* Kriesi custom code */
    .stretch_full.container_wrap.alternate_color.light_bg_color.title_container {
    top: 82px;
    }
    div#header_main_alternate {
    height: 92px;
    }
    nav.main_menu {
    top: 27px;
    }
    .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
    line-height: 65px;
    height: 45px;
    }
    
    li#menu-item-118 {
    overflow: visible !important;
    }
    
    li#menu-item-119 {
    overflow: visible !important;
    }
    
    /* Kriesi custom code END */
    
    /* Icons Menu */
    .icon1 {
    position: relative; 
    top: -15px;
    right: -120px !important;;
    }
    
    .icon2 {
    position: relative; 
    top: -15px;
    right: -120px;
    }
    
    .icon3 {
    position: relative; 
    top: -15px;
    right: -40px;
    }
    #490935

    Hi combra!

    You can add following code to Quick CSS to remove it

    .avia-menu-fx { display: none; }

    If you would like to make other changes, please elaborate

    Regards,
    Yigit

    #491200

    Thanks,

    isnt is possible to do the underline a bit shorter? I know, the line is that long, how it would be with the image in same line.

    #491292

    Hey!

    Please add following code to Quick CSS

    .avia-menu-fx {
        width: 70%;
        left: 25%;
    }

    Cheers!
    Yigit

    #491353

    Thanks Yigit, Is it possible to adjust each menu item individually? Problem: My items arent same length, sometimes two or three words. With this css code only items with single words looks good.

    Also, possible to add a separator like on sub menus?

    Have a great weekend.

    #491356

    Hey!

    You can change the code to following one

    #menu-item-59 .avia-menu-fx {
        width: 70%;
        left: 25%;
    }

    You can right click on Chrome or Firefox to inspect elements to find menu item ID’s http://i.imgur.com/HyPTCRg.jpg

    Regards,
    Yigit

    #491366

    Very cool, fixed it.

    Added a screen before. Is it possible to add a separator in the middle between two menu items?

    #491368

    Hi!

    Please go to Enfold theme options > Header > Separator between menu items and choose Large Separator :)

    Regards,
    Yigit

    #491379

    Ok, done :)

    1. Delete first and last Separator
    2. Make them a big higher
    3. Bring them to middle between the items (same prob like before, the icon..)

    And last: Maybe its possible to reduce the space between the items a little bit? Because of the icon left, the space is big.

    Regards
    Alex

    • This reply was modified 9 years, 4 months ago by combra.
    #491972

    Hi!

    Please post the url of the website here. You can try this code in order to decrease the left padding:

    .av-main-nav > li > a {
    padding: 0 13px 0 6px;
    }

    Regards,
    Ismael

    #492041

    See private.

    .av-main-nav > li > a {
    padding: 0 13px 0 6px;
    }

    nothing changed. I removed seperators. All code on Design -> Editior

    #492109

    Added

    #menu-item-search {
    display: none;
    }
    
    .avia-menu-text {
    margin-left: -35px;
    margin-right: 10px;
    }
    

    Removed search from menu, want to add them with text field to header. Now I want just to delete first seperator on menu.

    #492112

    Hi!

    Please add following code to Quick CSS as well

    li#menu-item-118 a {
        border: none;
    }

    Cheers!
    Yigit

    #614895

    thanks, solved

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Menu with Icons, some last styling’ is closed to new replies.