Elements apear only after inspect element/resize broswer window - css

As title says go here: https://www.woopservices.com/portfolio/about/ and press the little "menu" button on the bottom left.
It will display an empty box which is supposed to have a shortcode for visual portfolio just like i have on my homepage but what is strange is that it will not load.
It only loads if I resize the window or inspect the element.
This is driving me crazy i have search on other posts but nothing seemed to help.

Related

Menu items with anchor link url (/#xxxx) stay stuck in hover/active state as soon as page loads and without any trigger. Wordpress/avada

After too many hours of frustration spent not understanding what was happening, a random idea to test seems to have confirmed the issue, but no idea how to properly resolve, and I'm truly not certain if this is a wordpress, css or even a theme caused issue (Avada theme). So a quick explanation:
Wordpress, Avada theme. Everything updated and patched. There is a menu on the site. There is a basic white color for the text, and hovering over a menu item changes the text color to orange and adds a border to the top and bottom. Nothing crazy. Just a little "animation" by setting a base state for the menu items (text white, background transparent, no border), and setting some different parameters for when it's hovered/active. I actually set the options in the avada builder, but also confirmed what was being applied with chrome dev tools. While in the builder back end after setting this, it works flawlessly. Hovering a menu item triggers the transition and moving off returns it to original state. If I visit the page normally however, all the menu items are already displaying and stuck in their hover state. From first moment it's visible it's already like that, and all the menu items are the same as if they were all being hovered. Hovering, clicking etc doesn't change the state. It acts like the hover/active properties are always active. Even trying to force change the element state in chrome dev tools doesn't change anything. If I go back into the live edit mode (which is still rendering the site as well), it's functioning perfectly.
I couldn't find much of anything hunting the forums. But a lucky break....I noticed that all the links in the menu were of anchor link variety. The kind that has ...com/#xxxxx in the url where clicking on it scrolls to a section or part of the same page instead of taking you to a unique page. The site was set as a one page. Using the avada Wedding demo site as a starting point. So I tested replacing a menu item with an anchor link url with any other link without the #xxxxx . Suddenly, it works perfectly again. Any of the anchor link items will still be stuck in that hover state appearence, but any item not using an anchor link looks and works fine even when the menu is a mix of both.
So the dillema. The page is all on one page, so the menu items need to use the anchor style. I'm not certain why anchor link seems to be be stuck on hover/active. I had wondered if it's just technically always active by the way it works which would explain this. Any thoughts?
Menu items with anchor link urls don't change between regular or hover/active state

Menu hiding behind search box on one page

Wordpress site - https://www.planninggeek.co.uk/
The home page has a search box and the dropdown menu above goes on top of it.
However if I go to the search page - https://www.planninggeek.co.uk/?s=
The the search box is on top of the menu dropdown.
I have played around with z-index but drawn a blank.
Anyone have an idea as to why this is happening. The code for the box is the same.
mega-search-wrap mega-static has a z-index

Why do my background images stay fixed when I have them set to scroll?

I'm using AccessPress theme with Elementor plugin on WordPress.
I would like to have images on my page scroll with the page (as they do on a normal Website), but they are staying fixed and giving the "parallax" effect.
Example: https://youmeitea.com/faq/
Furthermore, I notice that when I load the page, the image loads in one position, but then jumps to another position. I would like to be able to use the custom offset in Elementor to position the image so that I can control which bit of image is visible behind the page title (refer to the example page).
I am unsure if these are related, but I suspect they might be. I have tried inspecting and playing with things in Chrome as well as selected every possible setting in the Elementor page builder to no avail. Searching for someone with more knowledge to give me some advice.

Control position of accordion and how it opens when you use an anchor link?

I currently have anchor tags in my main navigational menu, which when clicked will open the corresponding accordion item below. The problem I am having is, when you click on the anchor link, the accordion will open 1/2 way down the inside content, and you cannot see the accordion header/title. It is almost like it opens at the bottom of the content.
Everything seems to work with no problems in Firefox and Chrome, but the dreaded IE will not behave.
Does anyone have any suggestions or ideas?
Thanks much!
Jen

Fancybox display issues on iPad

I'm using the Fancybox on this page.
I've set it to show the videos in the top carousel in a Fancybox only
if the browser is Safari/iPad. If you click one of the videos in the
top content carousel, you'll see some extra lines outside of the
Fancybox. Plus, you'll see that the title item (set to titlePosition:
"outside") has some funky corners -- they're off by a pixel or two.
On the iPad, if you tap the "Click to See a Gallery of Popular Thank
You Gifts!" toward the middle, bottom of the page, you'll see some
extra lines outside of the Fancybox when it pops up.
This all works fine on Windows Safari 5. Any solutions?

Resources