How to have image icon above menu selections

Hey webguy007,
First you would need to move the menu text down to make room for the image:
#top #header .av-main-nav > li > a {
margin-top: 36px !important;
}
Then you can add your image above the text:

li#menu-item-3173 {
background-image: url(https://png.icons8.com/color/96/cccccc/morty-smith.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% -1%;
}

Try adjusting the image url and position to suit.

Best regards,
Mike

Hi,

Mike gave you an example, if you use that and repeat it for all your menu items then you will hopefully achieve the result in your screenshot.

Best regards,
Rikard

Hi,
Sorry for the late reply,
I’m not sure what was causing this, but I found that setting a max-height for the menu background images brought them all to the same size. Then because the menu titles were each a different length they were unevenly spaced, so I added a little margin to some and removed margin from others to make the spacing more even. Please feel free to adjust to suit.
This is the code I added to your Quick CSS:

#avia-menu li.menu-item-top-level {
max-height: 70px !important;
}
#avia-menu li#menu-item-533 {
margin-left: 18px !important;
}
#avia-menu li#menu-item-576 {
margin-left: -18px !important;
}
#avia-menu li#menu-item-579 {
margin-left: -18px !important;
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
I adjusted the sub-menu placement with this css:

.av-main-nav ul {
    top: 150% !important; 
}

To adjust your menu items, please change these values:

#avia-menu li#menu-item-533 {
margin-left: 18px !important;
}
#avia-menu li#menu-item-558 {
margin-left: -8px !important;
}
#avia-menu li#menu-item-576 {
margin-left: -18px !important;
}
#avia-menu li#menu-item-577 {
margin-left: -18px !important;
}
#avia-menu li#menu-item-579 {
margin-left: -18px !important;
}

These represent the menu items in order starting with “About” at the top of the list.
Please note you may need to add spacing because the text on some are too long for the short space.

Best regards,
Mike

Hi,
To remove the menu under line, I added:

.av-main-nav li:hover .avia-menu-fx, .current-menu-item > a > .avia-menu-fx, .av-main-nav li:hover .current_page_item > a > .avia-menu-fx {
    opacity: 0 !important; 
    visibility: hidden !important; 
}

To change the menu select background color: I added:

.header_color .main_menu .menu ul li a:hover, .header_color .av-subnav-menu ul a:hover {
    background-color: #f9dada !important; 
}

Feel free to adjust to suit.

To adjust the leadership sub-menu placement, I added:

.av-main-nav ul.sub-menu li#menu-item-534 ul.sub-menu {
    top: 0px !important;
}

As for these styles for mobile, the background image produces an interesting and unexpected effect in the mobile menu, but it does make reading the menu difficult. The best option is to remove the background image from the mobile menu with this css:

.html_av-overlay-side #top #wrap_all #av-burger-menu-ul li {
    background-image: none !important; 
    background-position: unset !important; 
}
.html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    text-align: center !important; 
}

I didn’t add this css, please try if you wish.

Best regards,
Mike

Hi,
To move the last menu item image down some, try changing the last number from a percentage to a px in this css:

li.my-class-vitamin {
    background-image: url(//youthfulnewyou.com/wp-content/uploads/2018/10/iv-drip-tab.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 3px;
}

right now in your code it’s “-1%”, changing to “9px” moves it down even more.
For the phone number, Please try this code in the General Styling > Quick CSS field:

#header .phone-info span font {
    font-size: 30px !important; 
}
#header .phone-info { 
   margin-top: 15px !important;
}

Best regards,
Mike

Hi,
The social icons are hidden on the mobile view, you can enable them by including this css in your Quick CSS:

@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks {
  display: block !important; 
}
.responsive #top #wrap_all #header_main .av-logo-container .main_menu .noLightbox.social_bookmarks {
display: block !important;
}
}

The social icons in the footer looks like they were adjusted to be a little larger, but the adjustment seems to be a little off. Try to use this css for the footer icons instead:

/* larger socket social icons */
#socket .social_bookmarks li a {
width: 50px!important; 
line-height: 50px!important; 
min-height: 50px!important; 
font-size: 30px;
}

#socket .social_bookmarks li {
height: 50px!important; 
width: 50px!important; 
}

#socket .social_bookmarks {
    height: 60px!important;
}

To move your mobile menu up a little, Please try this code in the General Styling > Quick CSS field:

@media only screen and (max-width: 767px) {
.responsive #top .av-logo-container .avia-menu {
    top: -20px !important; 
}
}

Best regards,
Mike