![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
September 14, 2018 at 11:04 pm #1009951
How would I setup Enfold to have the images above the menu as shown:
September 15, 2018 at 4:31 am #1009970Hey 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,
MikeSeptember 15, 2018 at 4:40 am #1009971Mike,
Thanks for the super fast reply! I’m still a little confused. How do I have each image for the menu selections appear above since it isn’t just one image?In your example it looks like you are only using one image? I need all the submenu images.
Thanks
September 15, 2018 at 9:49 am #1010056Hi,
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,
RikardSeptember 24, 2018 at 7:42 am #1013497Hi,
Can you please tell me where I paste the code? I assumed in the General Styling > Quick CSSI pasted both in the Quick CSS:
#top #header .av-main-nav > li > a {
margin-top: 36px !important;
}
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%;
}September 24, 2018 at 7:49 am #1013500I actually believe I found out this missing part.. I had to enable CSS in screen options in the menus page. However, I’m not sure exactly what to put in the CSS CLASS per your example, if this is correct?
September 24, 2018 at 8:46 am #1013511Hi,
You can use CSS classes as well if you like, if you give a menu item this class: my-class, then you can use CSS like this:
li.my-class { background-image: url(https://png.icons8.com/color/96/cccccc/morty-smith.png); background-size: contain; background-repeat: no-repeat; background-position: 50% -1%; }
Best regards,
RikardSeptember 24, 2018 at 6:04 pm #1013731Hi,
That works but….. here’s the css I have so far. The first two pics are perfect as shown. Why does the 3rd one not fit properly when I’m using the same code? The image is the same size as well: (The last pic, I made the background position -150% to play around with it but it still is big.
Thanks so much for your help!li.my-class-home {
background-image: url(nav0.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% -1%;
}
li.my-class-about{
background-image: url(nav-about-circle-hs.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% -1%;
}
li.my-class-body{
background-image: url(nav-about-circle-hs.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% -1%;
}
li.my-class-chiropractic{
background-image: url(nav1-circle.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% -150%;
}September 25, 2018 at 4:48 am #1013964Hi,
Where can we inspect the results you are getting? Screenshots don’t help much unfortunately.
Best regards,
RikardSeptember 25, 2018 at 5:07 am #1013972This reply has been marked as private.September 28, 2018 at 5:12 am #1015581Hi,
Really need the help here. I provided the login details two days ago.Thanks!
September 28, 2018 at 6:19 am #1015588Hi,
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,
MikeSeptember 28, 2018 at 6:44 am #1015592Hi Mike,
Amazing work….. Some more questions/issues with it:
When you take your mouse over any of the submenu words such as About, the box displaying the submenu starts under the image and not the words About. Same issue with the out menu names.
The spacing between the image circles is not even. ie; weight loss and skin care has good size gap of white space.
How do I also space the menu items further apart?
Thanks!
September 29, 2018 at 4:51 am #1015969Hi,
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,
MikeSeptember 29, 2018 at 8:25 am #1015987Getting closer…
How do we get rid of the solid short line under the home icon that stays there permanently and the red line that appears when you hover all the other icons?When you go to About > Leadership > you can’t select the two names that now appear middle of right side.
As a footnote, how do I make the background color change when I hover down the list of submenus? It’s all white now and hard to tell which you are selecting.
Lastly, how will mobile responsive be with these changes?
Thanks again!
September 29, 2018 at 1:59 pm #1016044Hi,
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,
MikeOctober 19, 2018 at 4:48 am #1023742Hi,
I’m getting ready to go live and have a couple more questions. How do I get the last graphic image where I have it highlighted in yellow to move down a little?How do I get the phone number bar to increase in height and also make the phone number bold and bigger font?
Can you also confirm that everything looks good in all mobile sizes?
Thank you!
October 19, 2018 at 1:13 pm #1023912Hi,
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,
MikeOctober 22, 2018 at 5:58 am #1024668Hi Mike,
All works great. My social media icons are missing from the mobile view top and I’m not sure why?
The image also seems to be cut off on the footer in desktop view / mobile view. How come and how to fix?How would I raise the mobile view menu up a little as it’s too close to the bottom and my revolutions slider frame. (It has a lot of white space on top to the phone number frame).
Thanks!
October 23, 2018 at 7:27 am #1025263Hi,
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,
MikeOctober 23, 2018 at 6:43 pm #1025552Worked perfectly and amazing! I forgot to ask how exactly do I change the font typeface for the Extra elements > Phone number?
Thanks again!
October 23, 2018 at 8:22 pm #1025599Hi,
To add custom font style to the phone info please use the CSS selector provided here https://kriesi.at/documentation/enfold/menu/#top-bar-info-phoneemail
Also, please check https://kriesi.at/documentation/enfold/typography/#how-to-add-google-fonts-using-css
Let us know if you have any questions.
Best regards,
Vinay -
AuthorPosts
- You must be logged in to reply to this topic.