Hello, Enfold is great! Please provide the CSS customizations for the following, if possible:
1. I would like to shorten the height of menu without ruining the drop down. I’ve tried the code below but it messes up the drop down menu:
#top .main_menu .menu li>a { height: 65px!important; line-height: 65px!important}
2. Change the active menu link color. Other ones I’ve found only changed the drop down item color
3. Change the title color/size (where the breadcrumbs were)
Hola Xavier,
Try this code:
.logo{ top: 80px; position: relative; background: #ffd2d3; padding: 20px; height: auto; }
The result:

Regards,
Josue
-
This reply was modified 12 years, 6 months ago by
Josue.
Hi Trap,
You are welcome. I’m closing this thread for now. If you have any questions after update, feel free to open a new topic.
Regards,
Yigit
Hi,
Please add following code to Quick CSS in Enfold theme options under Styling
#top .main_menu .menu>li:last-child>a { padding-right: 13px; }
Regards,
Yigit
Well cutting down on menu options is not an option.
Thank you for suggesting the solution of when the menu switches to the mobile menu.
I’ll give that a shot.
Thanks,
-Courtois
Hi,
I have an issue with product category size
On this page for example : Category page
The category image on top is displayed in W430 H360
The actual size is W430 H480
In other categories the size is fine, but some is not .. its weird
I have checked woocommerce settings, media settings, i have deleted the image permanently with ftp, i have test force regenerate thumbnails plugin but no luck! It drives me crazy
Do you have any idea how to fix it?
regards
Mario
Hi
I already read this topic and try it out – this is not my question! im talking about the logo size without scrolling down… thx
best
Dear Ygit,
Thanks to reply.
I do not have any problem with my footer. my problem come frome the widget.
I add the widget PAGES on my footer. Could I present a title on top of my widget PAGES like “MENU” or SUMMARY”?
Thank you
Stéphane.
Hi everybody,
a few months ago NICK has helped me to get a little customization done to get other toggles removed from the page if one of the toggles is clicked and open.
see here:
https://kriesi.at/support/topic/hide-toggles-if-a-toggle-is-open/
im currently updating my theme and i have realized that kriesi has updated and changed the toggle code a little bit.
Can someone please help me adding the customization to the new toggle code?
many thanks in advanced ;)
Aloha!
Please add following code to Quick CSS in Enfold theme options under Styling
.main_color.iconbox_top .iconbox_icon { background-color: #EE5625; }
This should do it
Regards,
Yigit
Hi All,
I’m going to close the topic for now and tag it for Kriesi. I figured we would start getting requests for a lot of the customization he did to the child theme used on the new site but we don’t actually have access to any of those files so it would be guesswork or re-doing it from scratch.
In any event, Kriesi will be able to be able to give us a final word on if it falls under needing to be done by a freelance developer (outside of basic support) or if he’ll be including any of the new things he customized into the main theme/providing the customization in some other format.
Regards,
Devin
Hi Josue
Thanks for your super quick reply.
I have solved it, after a day puzzling I found that I have to use the inner ID of the Avia builder elements.
Not 1,3,5,7 etc but
2,4,6,8 etc
This custom CSS works, It makes the first Icon on a page colored orange
#top .avia-builder-el-2.main_color.iconbox_top .iconbox_icon {
background-color: #faa127;
}
Hi,
Yes, please check this topic.
Regards,
Josue
I want to make every top-icon box on a page to have its own color for the icon background circles. I found this thread, but I was not able to make the CSS code that worked.
#top.main_color.iconbox_top .iconbox_icon {
background-color: #faa127;
}
This works for every iconbox, but how to I specify each individual icin box.
I have found the ID which are 1,3,5,7 etc
How does the CSS code has to look for one box?
I’d like your buttons to all look flat, none of that old-fashioned gradient tints on them anymore. Right now things just don’t match with one another when using contact submit button, etc.
I’d like the social icons to appear UNDER the team member, rather than only appearing on hover. Or at least the option to do that. I just don’t think many people realize they can find that information that way, it’s poor UX.
I’d like the layer slider layers to be nameable, instead of being called “layer 3, layer 4, etc,” so I can stop hunting for stuff.
GREAT theme, best you’ve ever done, best anyone has, probably.
Had the same issue, found I had to reduce the logo to 90px tall to stop it from disappearing under the content area of the page in IE 8. It also does not “reduce” when responsiveness happens, but it’s liveable. The later IE versions all seemed to work fine.
Hi,
Here’s the code that makes that behavior happen:
#top .subtext{float:left; position: relative;}
#top .logo img{float:left;}
.logo, .logo a{overflow: visible;}
#top .logo-title{
transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
font-size: 12px; color: #000; position: absolute; left:7px; top:-7px; opacity: 1; white-space: nowrap; }
#top .logo-subtitle{ color: #aaa; top:7px; }
#top .header-scrolled .logo-title{ opacity: 0; filter: alpha(opacity=0); }
However, i think you also need to alter the HTML.
Regards,
Josue
-
This reply was modified 12 years, 6 months ago by
Josue.
Nothing happened I guess.
This is my custom css file now:
.content { padding-top: 15px; }
#header_main .container { height: 88px!important; line-height: 88px!important; }
#top .title_container .container { padding: 0; min-height: 36px; }
.fixed_header #main { padding-top: 56px; }
#top .main_menu .menu li>a { line-height: 85px!important; }
Homepage link stays and acts different from the others when I try to scroll the page down. Also dropdown menu doesn’t open at the correct position.
Thanks again.
Hi Yigit,
http://imotec.nl/
.container_wrap {
clear: both;
position: relative;
z-index: 1;
border-top-style: solid;
border-top-width: 0px;
}
.main_color h2 {
color: #0075ad;
}
.main_color h4 {
color: #0075ad;
}
.main_color .widget_nav_menu ul:first-child>.current-menu-item, .main_color .widget_nav_menu ul:first-child>.current_page_item {
background: #ffffff;
}
.widget_nav_menu ul:first-child>.current-menu-item, .widget_nav_menu ul:first-child>.current_page_item {
padding-left: 51px;
left: -51px;
top: 1px;
margin-top: -1px;
padding-top: 1px;
width: 100%;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.header_color .main_menu ul:first-child > li > a {
color: #a1c0dd;
}
.main_menu .menu ul li a {
background-color: #0076ad;
color: #a1c0dd;
}
.header_color .main_menu .menu ul li a {
background-color: #0076ad;
color: #a1c0dd;
}
#top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a {
color: #ffffff;
}
body .alignright {
float: right;
margin: 4px 0px 0px 20px;
display: block;
}
embed {
margin: 0px 0px 0px 20px;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Best regards,
Pieterjan
I saw several topics about this warning message related to the simple slider. I turned off all my plugins and rebuilt my page, checking at each step to see if it came back, and it did. I’ve solved the problem but wanted to let you know WHEN it showed up:
When I uploaded an image that was a different size from the others I’d uploaded.
Removing the photo that was a different size and resaving the slideshow solved the problem. It appears that the site won’t crop images, and it won’t allow different sized images using the “No Scaling” selector, either; either of those resulted in the warning message.
Hi,
My bad, it should be
#top .main_menu .menu li>a { line-height: 85px!important; }
Sorry :)
Regards,
Yigit
Hi Ismael,
our test site is open, you can view it at http://www-test.mines-telecom.fr.
Thanks for help
Hi,
Please add following code to Quick CSS as well
.fixed_header #main { padding-top: 56px; }
#top .main_menu .menu li:first-child>a { line-height: 85px!important; }
Regards,
Yigit
Hi,
Please add following code to Quick CSS as well
.main_menu ul:first-child > li > a { line-height: 60px!important; }
This should do it
Regards,
Yigit
Hi ckerr44,
What may be happening is that the desktop user has narrowed their browser and the top menu (not the main menu) is too wide at that point and the whole layout doesn’t actually switch to the mobile layout until the browser is smaller so the menu items overlap.
Regards,
Devin
We are having a number of folks report that this page: http://ignatiansolidarity.net/iftj is switching to the mobile version on desktops and then showing a bunch of crazy code. It doesn’t happen all the time, nor does it seem specific to any one browser. Any idea why this might be happening?