I am migrating a site to Enfold form a custom theme that was too hard to edit. I can do 95% of what is needed however one part is stumping me.
I am trying to replicate the menu and header area on this page: http://www.ptmi.net/
I have tried a few things:
- Editing CSS using the “Logo Center, Menu Below”
- Adding a top border using an image as seen here: https://kriesi.at/support/topic/full-width-image-divider-above-the-header/ but ti was stretched out and really messed up the rest of the page. (page was hidden under the header)
- Using the Full-width submenu but it looks like crap. Maybe If I can find a way to make it look the exact same as the current menu.
- I have settled on using the stock menu as I can make it look perfect but I essentially need to place a color section above it or a slider above it in the header.
Hello Ismael,
About the code, which I added like you instructed:
#mobile-advanced li > a:before, .html_header_mobile_behavior #mobile-advanced span > a:before, #mobile-advanced .mega_menu_title:before {
content: “•”;
position: absolute;
top: 13px;
margin-left: -10px;
font-family: ‘Arial’;
font-size: 20px;
}
I now updated the enfold theme but in the fullwith menu the symbols in-front of the menu items are not • but arrows, how can I change that.
Best Regards,
if you want it a bit bigger those icons:
#av_gmap_1 .av-icon-char::before {
font-size: 24px;
position: relative;
top: 2px;
}
edit: or better place the icons with vertical align:
#av_gmap_1 .av-icon-char::before {
font-size: 24px;
position: relative;
vertical-align: middle;
}
-
This reply was modified 9 years, 4 months ago by
Guenni007.
Also shrinking header and unstick top bar doesn’t work now. In the enfold-child/js folder there are 2 avia.js files. The avia.js.BAK is the earlier one without the lightbox exclusion.
Hi!
On our site the logo in the top left corner “Meditera i Stockholm / Tara Kadampabuddhistcenter” shrinks when you scroll down the homepage and it becomes very small and unreadable.
I would like to keep the logo the original size wherever you scroll on the homepage.
Can you help?
Many thanks,
Jangdom
Hi!
Please consider to create a new topic, so we can be able to review and help you out.
Thanks a lot
Cheers!
Basilis
Most certainly!
I’d like it to look like this 3 pic section:
Content left justified and the 3 squares centered on the page with a nice margin on each side.
Thank you!
Hi,
I have found the problem:
In my functions.php there was a line:
add_theme_support( ‘avia_custom_shop_page’ );
When I removed the line I got the product search result page when I the url was ?s=iron&post_type=product
Now when I removed the line there is a problem with the slider at the top of the page.
It doesn’t show the slider in the shop page in the environment site.
To show the slider I use the command [ av_layerslider id=’6′]
I saw in your site
Custom WooCommerce Shop Overview with Advanced Layout Editor
The easier option is to simply create a new Page and add a “Product Grid” template builder element, along with all the other stuff you want to show and simply don’t use the default shop page at all. This should be sufficient in most cases.
that you recommend to create a new page for the shop page.
If I do that where should I define this page as my shop page?
In the private content I provided all links from staging compare to production.
-
This reply was modified 9 years, 4 months ago by
nermoz.
-
This reply was modified 3 months ago by
Yigit.
-
This reply was modified 3 months ago by
Yigit.
Hi,
Please try the following in Quick CSS under Enfold->General Styling:
.postid-619 .avia-image-container.avia-align-right {
margin-left: 0 !important;
margin-top: 0 !important;
}
Best regards,
Rikard
Hi Sonja,
Glad we could help :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard
Hi,
Great, glad you got it working :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard
Hi,
Great, glad you got it working :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard
Hi,
Glad we could help :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard
Hi,
Great, glad we could help :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard
Hi,
Please try the following in Quick CSS under Enfold->General Styling:
.page-id-1031 #after_full_slider_1 .content {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
Best regards,
Rikard
And yes, I’ve toyed around with the header settings and I can’t get the white space at the very top of the screen to go away.
Hello,
I’m trying to make the main navigation (top level) and subnav menus bolder but cannot seem to get things to work.
I found a thread from 2014 but my assumption is the css code is out of date
Please advise on how I can make the entire main menu and submenu bold and change the font sizes if necessary. I looked at the advanced styling areas within the theme options and only saw limited settings.
How can I increase the size of the secondary menu bar? I’d like to make this about 1.5 the size it is now.
It’s the top bar in orange on http://www.jbaforyouth.org/.
Appreciate your help.
Hey!
I played around with the code and I think that the only solution is to have different sizes of the image. And you have to define the background property in the Quick CSS field.
HTML:
<div class="team-profile frame5 time7 johndoe"> </div>
<div class="text-profile title">
NAME
</div>
CSS:
.team-profile {
width: 400px;
height: 400px;
top:0%;
-webkit-animation-name: play;
background-position: 0 0;
animation: revplay 1s steps(15,end) 1 normal forwards;
}
.johndoe {
background: url('http://exxatcontent.blob.core.windows.net/exxat-website-public-documents/rakesh%20strip.jpg') left center;
}
For smaller screens, you have to define the background property again but provide a smaller version of the image.
@media only screen and (max-width: 767px) {
.johndoe {
background: url('http://exxatcontent.blob.core.windows.net/exxat-website-public-documents/rakesh%20strip_smallerversion.jpg') left center;
}
}
Regards,
Ismael
Hi,
You can edit the main menu links in Enfold > Advanced Styling, Just select Main Menu Links. For the footer you will need to use css code to modify the top and bottom margin/padding, just add this to Quick CSS and just modify the values:
#footer {
padding-bottom: 15px;
}
#footer .widget {
margin-top: 10px;
margin-bottom: 10px;
}
Best regards,
Nikko
Hey!
Sorry, I made a mistake on my code, please change this:
#.sidebar_left .menu li:first-child a {
border-top: 0;
}
To this one:
.sidebar_left .menu li:first-child a {
border-top: 0;
}
Regards,
Nikko
habs so gelöst:
#top table.shop_table .actions .button {
min-width: 170px;
width: 170px;
margin: 3px 0 3px 7px;
}
Hi!
I will do lock the topic here, you can keep discussing in mail.
Thanks a lot
Regards,
Basilis
I can’t seem to find a solution for this problem, which I thought was a easy one.
(I’d like to have an Advanced Layer Slider on the desktop version, and another one on mobile. So I created two of them. I’ve put the desktop slider inside of a color section (via text block) because I wanted to have the parallax background. I thought to use the same method for the mobile slider, even though the parallax effect doesn’t show on mobile. I tried to do so, and hide/show the desktop/mobile slider when on mobile and viceversa. And it worked fine, except that on mobile the slider shows a border that boxes it and a background with alternate lines.) So I figured to try and put the Layer Slider outside of the color section as a media element (without the text block workaround, to be clear). The borders and background aren’t there anymore, but now I can’t find a way to hide the Layer Slider on the desktop version of the website.)
So I would need a solution for one of the two problems. Whichever is the easiest.
Thank you very much
Now the shadows are gone. I want it with shadows nad want it to look like the tabs.
my code looks like this:
.custom-tag { padding: 5px; background-color: rgba(0,0,0,0.5); }
@media only screen and (max-width: 767px) { .progressbar-title {
font-size: 11px;
}}
@media only screen and (max-width: 767px) { .av-catalogue-content p:last-child {
font-size: 11px;
}
.avia_message_box_content {
margin-left: -8px;
margin-right: -8px;
}}
.sidebar_left .inner_sidebar {
margin-right: 0;
}
.sidebar_left .menu li a {
border: 1px solid #e1e1e1;
border-right: 0;
border-left: 0;
margin: 0 0 -1px;
padding: 12px 16px !important;
text-align: left;
}
#.sidebar_left .menu li:first-child a {
border-top: 0;
}
And the subpages/subbuttons looks wrong . (see screenshot)
View post on imgur.com
-
This reply was modified 9 years, 4 months ago by
lech07.
Hey guys and girls!
I found a forum post from 2014 covering this but the code doesn’t seem to work for me.
So the question simply is this: how can I center the ‘Share this entry’ text for the Social Share Buttons?
Additionally i would like to reverse the colour of them so that they hover white from their respective colours.
Any help is appreciated.
The code from this post: https://kriesi.at/support/topic/reverse-the-colours-of-the-social-share-buttons/ isn’t working for me in either functions.php or Quick CSS.
Cheers
Ed
Till this is integrated into the official Enfold release, you may use the following CSS snippet as a temporary workaround:
@media all and (min-device-width: 768px){
#top .av_header_transparency ul.cart_dropdown{
border:0;
}
#top .av_header_transparency a.cart_dropdown_link{
background-color:inherit;
color:inherit;
}
}
Hi,
I can see I am not the only one having this problem but I can’t find the solution in any topics.
I use the newest version of Enfold but still the layer slider is not being updated:
An update is available for LayerSlider WP!
You have version 5.6.8. The latest version is 6.0.5.
Could you please look at it? Log in details in private content.
Hi thanks,
almost there, caption and button are not jumping on my face anymore. The only thing that goes wrong now is that when you decrease the window is size horizontaly, the caption and button are shifted to the left. The white caption text is unreadeble. the ewhite space is part of the picture. So the caption and button position shoud either be fixed on the desktop postition or shifted a bit to the right. Not too much, just enough to keep caption and button on the pic.
thanks
Dick