simona6

Hi. I think it is something in the theme doing it as I added two rows with an icon on the second one on a different WP theme, and it did exactly as expected. Moved up with a minus top margin, no z-index needed (as I agree.. that can cause other issues). And went over the upper Div. So I will refer it to our theme devs. What should work in CSS, is being ignored for some reason.

Also an oddity... it has a sticky menu. If I set it just to be margin-top: -100px, it appears to crop the top as it goes behind the previous DIV. But when you scroll the screen it goes over the sticky menu with the high z-index... still cropped...

Alas not, as this is purely in a preview... It's in WordPress using WP Bakery. One row after the other. Each row has three columns - tho only the center one is being used (others are to create gaps). Above the 'element' for the Heading, is the Info box to add the icon. All rows are relative positioned. Even if I set the icon DIV to be absolute, and high z-index, it still goes under the previous DIV.

I am creating a page with rows. Each row is a Step in a process. In the second, third and so on rows, above its title I have added am element with a 'down arrow'. I want that Element to be 'in front of' both DIVs. When I do it now, and set a minus top margin, it goes up, but behind the row above. How do I make it go in front of it? I've done it with SVGs so it's making it have that layered look, but doesn't seem to work on DIVs only. I assumed z-index: 20000; would do the trick, and even if I set the row above to be a lower z-index. Help...

don't worry, our Access Control plugin actually does it! Oddly enough. But... is there a way to apply display:none to a CSS class... based on user role. Seen loads about this. But none that are in that great detail. If we can't, then the access control is fine. but be good to hide the div!

https://stackoverflow.com/questions/50907170/wordpress-if-user-role-css-class-then-display-none This seems to partially answer the question, but it doesn't state how to tell which roles will HIDE the DIV... only if it is 'logged in'. If someone is logged in they can view the Wall, but we need it hidden for customer and subscriber.

Sorry the UK bit is the end of the domain.. .co.uk/?s=......... and so on. It's not a page as such. So how would I write a function that checks if they are logged in, and checks from the array of user roles. If not logged in, they we hide the DIV. But if they are logged in, but their user role is NOT one of those specified we hide the DIV.

We have a search box in our website, but we want it to appear only when someone is logged in, and 'subscribed', as it reveals the shop. At the moment, they cannot access the shop, but the search would reveal shop entries. So two questions: 1) how can I assign a class based on User Role, that display: none to a search DIV within the theme? 2) "uk/?s=fred&post_type=product". How can I hide or 'redirect' this type of URL to another, based on user role? I can redirect pages, but this is not really "a page"... is it? Thanks Simon

Yep think I've sorted it. It's now Capitalized.

#grve-main-menu .grve-wrapper > ul > li > a, #grve-main-menu .grve-wrapper > ul > li.megamenu > ul > li > a, #grve-theme-wrapper #grve-hidden-menu ul.grve-menu > li > a, .grve-toggle-hiddenarea .grve-label, #grve-hidden-menu ul.grve-menu > li.megamenu > ul > li > a, #grve-main-menu .grve-wrapper > ul > li ul li.grve-goback a, #grve-hidden-menu ul.grve-menu > li ul li.grve-goback a { font-size: 14px!important; text-transform: uppercase!important; letter-spacing: 1.0px!important; } I see this at the top, which his what sets the font for the main menu itself. I've stripped out the 'megamenu' part which I think is causing it to override that, and then add that separately, but it seems to have no effect. What I think you are saying, is that if one class has the UPPERCASE assigned to it, and another class it added to it later, using a different !important method, it is ignored.

We are trying to recreate SVG images using a theme we have used elsewhere, but in a different theme. We are able to copy the SVG code and place it into WP Bakery and it works, to a point. Example: https://www.portotheme.com/wordpress/porto/cleaning-services/ If you scroll down this page, you will see a deep blue row titled "For Residential and Commercial Cleaning". The top and bottom curves are SVG. When I copy that code and use it elsewhere, I get a top curve with a black stroke edge to it. No idea what is telling it to be black. The bottom curve doesn't work for me. I have asked them how they created the curve, but is there an online tool that can do this, so you move the pointers around to get your shape, add the any 'edging' you want and then copy the SVG code? Thanks.

I use it a lot, yes. But just cannot see what is causing the menutitle to be uppercase, when I am overriding that in my CSS.

Can you show me a screenshot of both of them please. I've got important set on the Main Menu alonig the top, but cannot see two .menutitle classes with both those options.

I've been doing work on this website recently. I've set the main menu to be CAPS, but for some reason I cannot override the Mega Menu titles to be Capitalized. They have their own Class "menutitle", but even with that set as "Important", and nothing that appears to be loading after, I cannot see the cause. https://www.79design.org.uk I'd appreciate anyone spotting the cause to this. Thank you. Click/Hover on Services to see the menu.

Rolled it out on a few other pages now. They load instantly. Good intentions from Bakery, but better to let the designer control it I think. Anyway.... at least I can control it using this method. Thanks for your help.

You are dead right. I've replaced the Image WP Bakery method with the Text Box method, and a little CSS to take any padding off around it, and it loads instantly. It must be part of WP Bakery! In that case I'll setup a CSS class to cater for all those curves, and re-assign them with that method. Thanks a lot. Just wish I could ascertain where in Bakery it is doing it. As the otheres, the tiles below it, they do it. They use the Image element. I dont' care abotu those fading in... but would be nice to have the control!

So no way to see what Javascript file (code within the file) is causing it, as then I could narrow down where it is coming from - ie, theme folder or plugin folder...

Found this.... something about it not loading straight away...? Not sure if that is fonts only tho on a preload.

The theme doesn't have any setting for lazy loading. We use to do it via Fastest cache, but we no longer use that plugin. Can you show me what code or what you have found that alerts to you Lazy Loading, if only for that image? I notice on the smaller 'tiled' images below, they do it too, when you refresh the page.

Can you please direct me to it, to see if I can remove it? There is nothing set in the theme that does it.

https://www.new.79design.org.uk. This is in demo... but will be live soon. All images, then fade in for a second. We have no lazy loading on. And opacity is on 1. So why do they not just 'appear'?! Odd. hope you can assist.

On our website we have various images, but they all seem to 'load in'... rather than just 'appear'. It's particularly noticeable on the curved image at the top of our site. IS this something anyone has come across before? Happy to post link if that is allowed. Simon

Hi We have a website where on all browsers everything shows up. But on Chrome on my Macbook Pro, it doesn't. I checked and our software is up to date. I looked at the site on ipad. phone and Chrome on my Windows machine, and they all show the content. It's clearly not a CSS issue as otherwise it probably wouldn't show anywhere, plus I removed all Custom CSS to test, and it still failed to show. Not sure if I am allowed to submit a URL here, but if I am, please let me know. The code is in Source code, so it's there - it's just not showing. Simon

The theme people told me once, they do not think of it as a fault. As it is to centralise the logo. They gave me code years ago, but it has since been lost with theme upgrades. So the second option is best. That code I entered has done the trick. So thank you sincerely.

.grve-logo .grve-wrapper img { top: 3%; } .grve-logo .grve-wrapper { top: 3%; } Actually it's a little more like this I think, else the logo is rammed at the top of the DIV with no spacing. This seems to get it virtually spot on. Goodness knows why they coded what they did tho - I'm sure they have their reasons, but it makes no sense to me.