Hi John,

I haven’t built the site I want to implement this question for BUT I have another that would have the exact same set up so if you were able to take a look at that one and let me know generally how I would do this.

See private section.

Thank you Mike,
I managed to get the functionality I was after by using your code (tweaking some values) along with adding

.html_top_nav_header .av-logo-container {
    height: 150px !important;
}

I hadn’t added any custom styles that would affect function of the header section prior to now – so is having the menu above + logo below set to scroll/shrink causing the menu to overlap the logo? and if so is this a glitch in the theme?

Hi John,

Did you see my little note?
“*in order to work on the site while I wait for assistance I have turned off sticky/shrink which is what I believe is causing the error.”
It’s only happening when I turn on the sticky shrinking head that I had to turn off so I could style everything. So I included a log in so you could turn these settings on and see the error.

I quickly turned on the sticky/shrinking setting and took a screenshot for you.

This is how it looks at the very top.

This is what I was told by our server folks – I don’t know what it means. Is there anything in enfold that could ‘trigger’ this ‘modsec rule’?

“I have checked the logs and it seems a modsec rule was being triggered and causing the sever to block you. I have since whitelisted this rule and it shouldn’t happen again, however sometimes multiple rules can be triggered for the same event, and we can’t see the second until we clear the first. Please let us know if you are still having an issue and we can check to see if another modsec rule is being triggered.”

The issue has been fixed – I just want to know if what caused it was enfold – in the event it happens again.

Let me know what you think

Hi Rikard,

I will ask my server host support team about this as I tried the steps provided for the debugging mode as well as modifying the .htaccess file/other such files and I can’t get it to work :(

When using the debug mode, copied the broken page’s shortcode and added into a new page the new page’s layout editor didn’t work but also the page looked different when published and viewed. I don’t know if this is relevant.

Hi Victoria,

Just to confirm you made sure to disable the margin styles I added to the site to try and correct the centering issue ( #price-match ) before seeing if it looks incorrect for you yes?

It is a live client’s site and I so I couldn’t leave it off centre while enfold support took a look unfortunately.

If you think updating the theme will fix it then I can do that – I was hoping to not have to do that in the event something goes wrong (every now and then when I update enfold it breaks the site).

I tried the css snippet provided ( and then cleared cache on the tablet browser etc) and also increased the max width to see if it would help but it still looks the same – showing part of the mobile menu on the right.

Sorry to be a pain. I just have no idea what I would have done to break it as I have used this theme for years now without running into this particular issue.

Any further things we could try? *log in info is in a private section in an earlier reply if needed*

Please see login for admin in private section.
Thanks for your help guys :D

Hi Basilis,

I mean that when they click through the pagination of the blog section (the blog section is halfway down the page layout) the next group of articles load but the user is brought to the top of the page, forcing them to scroll back down to where the blogs are again.

Almost! It does stay put which is perfect but it’s still turning white as it scrolls (which is what I want on desktop and was part of the original script). Any ideas on keeping the transparency on tablet when scrolling? If it’s going to be really tough to acheive I can leave it.

Thanks! :)

This is absolutely perfect! Exactly what I wanted :D
Enfold support is the best. And yes the mobile logo definitely needs adjusting – thanks for letting me know :)

Thank you!

You can close this ticket.

Hi Yigit,

Thanks for your response. I implemented your code in replacement of mine and it doesn’t look to be working.
All the images both left/right aligned and center-aligned are now back to their default settings.

Here is a page that is a good example *see private link* *see private screenshot*

Near the top there is an image on the right that I want to fit 100% of its container and then below there is a center aligned image that I don’t want stretching 100% of the container because it becomes fuzzy etc.

Here is my current css:

.avia-image-container.avia-align-right .avia-image-container-inner, .avia-image-container.avia-align-right img {
width: 100% !important;
margin:0px !important;
}

.avia-image-container.avia-align-left .avia-image-container-inner, .avia-image-container.avia-align-left img {
width: 100% !important;
margin:0px !important;
}

• This reply was modified 7 years, 7 months ago by Briana.