-
AuthorPosts
-
August 20, 2015 at 3:48 pm #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; }
August 20, 2015 at 5:24 pm #490935Hi 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,
YigitAugust 21, 2015 at 8:36 am #491200Thanks,
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.
August 21, 2015 at 12:07 pm #491292Hey!
Please add following code to Quick CSS
.avia-menu-fx { width: 70%; left: 25%; }
Cheers!
YigitAugust 21, 2015 at 1:07 pm #491353Thanks 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.
August 21, 2015 at 1:09 pm #491356Hey!
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,
YigitAugust 21, 2015 at 1:25 pm #491366Very cool, fixed it.
Added a screen before. Is it possible to add a separator in the middle between two menu items?
August 21, 2015 at 1:28 pm #491368Hi!
Please go to Enfold theme options > Header > Separator between menu items and choose Large Separator :)
Regards,
YigitAugust 21, 2015 at 1:41 pm #491379Ok, 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.
August 24, 2015 at 2:27 am #491972Hi!
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,
IsmaelAugust 24, 2015 at 8:04 am #492041See private.
.av-main-nav > li > a {
padding: 0 13px 0 6px;
}nothing changed. I removed seperators. All code on Design -> Editior
August 24, 2015 at 12:02 pm #492109Added
#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.
August 24, 2015 at 12:06 pm #492112Hi!
Please add following code to Quick CSS as well
li#menu-item-118 a { border: none; }
Cheers!
YigitApril 15, 2016 at 3:22 pm #614895thanks, solved
-
AuthorPosts
- The topic ‘Menu with Icons, some last styling’ is closed to new replies.