Hi Maaike,
Instead of the suggestion you pointed out, would it be okay if we do a bit of reducing the menu paddings then have the menu/navigation sticky? try making it sticky again then add this css code in Quick CSS (located in Enfold > General Styling):
#top #header .av-main-nav > li > a {
padding-top: 5px;
padding-bottom: 5px;
}
Hope this helps.
Regards,
Nikko
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top .sub_menu>ul>li>a {
text-decoration: none!important;
}
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
Best regards,
Yigit
Hi,
Elliott was famous for providing quite a lot of customizations. So yeah go ahead and try it. Follow exactly his steps: https://kriesi.at/support/topic/image-gallery-image-shows-up-by-click-instead-with-mouseover/#post-382049
Best regards,
Andy
Hi,
again, it’s password protected, so we can’t login: http://imgur.com/a/W6inE
Please check.
However, in theme settings choose “Logo left, Menu right”. Then use this code inside Quick CSS field:
.html_header_top #top .av_logo_right .logo {
right: 40%;
}
and adjust as needed.
Best regards,
Andy
Hi all,
I have a large background image spanning across the top of my main page.
I would like to have a large search bar overlaying it.
I cannot seem to figure out where or how I can achieve this.
Any solutions would be greatly appreciated.
Thank you
Hi
How can I hide the underline?
(It would be great if hide on menu and not hide on submenu)
Thanks
I tested that but not working:
.avia-menu-fx {
text-decoration: none !important;
}
Hi,
parallax scrolling on mobile is deactivated by default, refer to: https://kriesi.at/support/topic/no-parallax-effect-in-mobile-devices/
So basically you’re saying that this code is working (on desktop):
.test-icon {
margin-left: 67px;
}
while this code (for mobile):
@media only screen
and (max-width: 736px) {
.test-icon {
margin-left: 67px;
}}
is not working for you?
If the first one is working for you, then with media queries it should work fine, too. For more information about media queries refer to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I feel it would be best for you to work together with a freelance developer on those issues, especially if you want to customize things and if you’re working on time sensitive projects: http://kriesi.at/contact/customization
Best regards,
Andy
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) {
#top #header_main > .container, #top #header_main > .container .main_menu ul:first-child > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
height: 50px !important;
line-height: 50px !important;
}}
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
Best regards,
Yigit
Thanks,
seems like you can close this topic.
In case someone else has similar problem:
The problem was with Jquery. Jqery updater plugin made other complications, WP jQuery Plus fixed everything.
Best regards, Ana
Hey sanglicious,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) {
#top .aviaccordion {
min-height: 50vh;
}}
Please feel free to change the min-height value 50vh to suit your needs.
Best regards,
Vinay
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
header.entry-content-header {
text-align: center;
position: relative;
top: -90px;
background-color: #8c8c8c;
max-width: 200px;
margin: auto;
}
Best regards,
Yigit
Hi,
I believe the 24H badge is the widget area? It’s placement is perfect the only issue i noticed is the logo runs into it in mobile mode.
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) {
.responsive #top .logo {
width: 60%!important;
margin-left: 60px;
}}
Best regards,
Vinay
Hi,
Please give this plugin a try https://wordpress.org/plugins/font-organizer/
Add the below class name for the menu items under 4. Custom element settings and choose your font.
#top #header .av-main-nav > li > a .avia-menu-text
Best regards,
Vinay
Hi,
It’s the padding added to the main content area. Try the below css in Quick CSS
.html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
padding-top: 140px!important;
}
Best regards,
Vinay
I have a problem regarding fonts, ONLY on iPhone, iPad (iOS) Safari browser
I added webFonts via CSS3 through FontSquirrel
body {
font-family: questa_sansregular !important;
}
h1,h2,h3,h4,h5,h6 {
font-family: questa_sansregular !important;
font-weight: normal;
}
`
The CSS is fine, and it works great on desktop Mac, and all other mobile devices, Windows etc.
What is wrong with Apple and iPhones?? :S
PS: I tried emulating on following sites without it showing the problem.
http://testiphone.com
http://www.responsimulator.com
http://iphone5simulator.com
http://ipadpeek.com/
I have also verified that the problem exists on iPhone 6 and iPhone 7 as well.
@Vinay,
Ah, thanks for the clarification. This worked. However, I had to “flush the style css by inserting something into the Quick CSS section” saved, deleted and saved, which I read in another topic.
H
so if you like to make it perfect – you have to style your print output by editing your own print-style
you can do it i think if you put in quick css :
@media print {
put in your printlayout rules here
}
there are some plugins which do that job of creating a pdf file of your screen output. But this is often not for interest of your sitevisitors.
Mostly they like to have the Headings and the main-content – so it is a good advise to set all other infos (top header, navigation, sidebar infos etc to display: none. than reduce font-size to normal print size (headings (h1 maximum 20px ). and the p-tag to 12px. etc pp.
some webdesigners additionaly creates there own class for print-output to influence the output in detail.
f.e. .noprint {display: none !important} and than give to all your not wanted to print out (even in main-content) this class.
f.e: this should be printed. this should be printed. this should be printed. this should be printed. this should be printed. this should be printed. this should be printed. this should be printed. <span class="noprint"> this shouldn't be printed this shouldn't be printed this shouldn't be printed this shouldn't be printed this shouldn't be printed </span> this should be printed. this should be printed. this should be printed. this should be printed. this should be printed.
or to change to serif font for all text. etc. pp
@media print {
* {font-family: "times new roman",times,serif;text-align: justify;}
.noprint {display: none !important}
}
hi rikard – i think he liked to colorize the background and the font-color –
so mcraig77 try this ( btw. if a rule does not work allways try to put in !important after the rule)
.main_menu #menu-item-1107 .avia-menu-text {
background-color: red !important;
color: #000 !important
}
.main_menu #menu-item-1107 a:hover .avia-menu-text {
background-color: blue !important;
color: #fff !important
}
PS the span has that class avia-menu-text (span should work too)
if you like to have round corners with border: (btw. you see you can manage each corner separately ! top-left top-right bottom-right bottom-left)
.main_menu #menu-item-1107 .avia-menu-text {
border: 2px solid #fff !important;
border-radius: 15px 10px 5px 0 !important;
}
if you do not do it with .main-menu the responsive menu does the same – and this could look ugly.
Hey guys!
I added a header widget near my logo. To do so I followed the instructions of enfold (add code in the functions.php) And then I used this code to relocate:
#header .widget {
left: 15%;
padding-top: 0;
position: absolute;
top: 10;
transform: translate(-50%);
z-index: 999;
}
It works fine the problem is that is not responsive. There is any code I can added to make it responsive? Also when the logo area gets smaller when scrolling the screen.
Thank you much!
Hi Basilis,
When I add that to the bottom of my child theme’s functions.php I get this error:
Notice: Use of undefined constant ‘avia – assumed ‘‘avia’ in /path/to/wordpress/wp-content/themes/enfold-child/functions.php on line 57
Notice: Use of undefined constant print’ – assumed ‘print’’ in /path/to/wordpress/wp-content/themes/enfold-child/functions.php on line 57
Notice: wp_dequeue_style was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.0.) in /path/to/wordpress/wp-includes/functions.php on line 4136
edit: I also tried the solution posted here but without any luck: https://kriesi.at/support/topic/remove-native-css-framework/
-
This reply was modified 9 years ago by
Daniel.
Hey JeeBar,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.avia-tooltip {
margin-top: 140px!important;
min-height: 40px;
}
Best regards,
Vinay
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.html_header_top.html_header_sticky #top.page-id-819 #wrap_all #main {
padding-top: 0px;
margin-top: -10px;
}
Best regards,
Vinay
Hi,
i chose to display the logo and main menu area on the left side of my desktop layout. I also placed some widgets there (in the widget area called “displayed everywhere”) like a google map, and latest posts.
On desktop this looks fine, but on mobile when tapping the menu icon, it opens to show only the main menu, and no widgets, and also no social icons.
The masonry element is only half visible on mobile phone because it is hidden “behind” other elements like the header (that i have on the left side in the desktop layout, and on mobile will be the first element, on top).
I tried to correct it with padding or whitespace but also don’t want to change the desktop layout too much.
Hi!
Thanks a lot for letting us know/
Please create a new topic, if you need something else.
Cheers!
Basilis
Hi,
Glad we could help :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard
Hey J.,
Thanks for the login details. I can see that you have used the Layout Builder to create your posts. When using the builder for posts you will need to set the excerpt manually, you will find the excerpt field by selecting to show it under Screen Options in the top right hand corner of your screen. You can also try to save the post while the default editor is active and the excerpt should show automatically after that.
Best regards,
Rikard
Hey rickyporco,
To display icons next to menu items or in the top bar please perform the steps below:
1. Add the icon using advanced layout builder and publish the page.
2. Right click on the icon and inspect the element.
3. Copy and paste the icon html to the menu lable.
Best regards,
Vinay
Hi,
Sorry but it’s not clear what you like to have on top and below what? Please elaborate the issue or upload a screenshot/mockup to imgur.com and share the link here so we can help you better :)
Best regards,
Vinay
Hey stuartcale,
I assure you that there is no security risk to the theme. It’s a false warning most of the time. Please refer to this link for more details https://kriesi.at/support/topic/being-hacked/#post-741473
Have you updated the theme to the latest version 3.8.5 ? Updating the theme should fix this issue.
Best regards,
Vinay