Thanks Mike. It was set to 109%. Changing it to 110% looks like it worked when viewed full screen. But when the browser window is resized or the website is viewed on smaller devices, the background starts to not expand all the way along the bottom of the content container (on the left and right).

Here’s the CSS I currently am using for that:

.custom-header-background-bottom {
    background-image: url(/wp-content/uploads/2024/09/top_no_fade.png);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto;
    height: 50px;
    width: 110%;
    position: absolute;
    top: 25px;
    left: -5%;
    transform: rotate(180deg);
    border: #FF0004 solid thin !important;
}

• This reply was modified 4 weeks, 1 day ago by NicomIT.

Thanks Mike. That worked great.

Is there a way to display the background at the bottom of the main content container on all the pages in the website? After making these updates, it’s displaying there on the home page, but not the other pages/posts. The background that displays at the top of the footer is showing on all the pages/posts, so that is great.

One small thing I noticed is the background at the bottom of the main content container doesn’t extend quite to the full width of the area above it. When you view the home page on a large screen/full width, it looks like there’s approximately 4 pixels on the right of it where the background doesn’t go all the way to the edge of the content container. If you resize your browser to make the screen smaller, it looks like the same thing happens on the left and right sides, but it’s more noticeable. I placed a red border around the background to make this a little easier to see.

If you could let me know what would need to be adjusted so the background extends the fill with of the content area, that would be appreciated. The way the background displays above the footer area is prefect and is what I would like this to look like.

Thanks again for the help.

Thanks Mike. I found the issue. It looks like there was some additional code in my CSS that was still making the background of the area white.

#main {
    background-color: white !important; /* Keep the white background only in the main content area */
}

Things look good now, except that the area where the margin was added to the bottom of the page is still displaying as white on the home page. Is there something different that needs to be done for that page? All the other pages in the website are displaying things fine.

Thanks Ismael.
That added space to that area, but the area where the margin is has a white background. Can you let me know how to increase that margin and not have a background color? We only need to have the white background color in the main content area and in the widget/footer area. The area where the margin is being added, should have no background color so you can see the main background image used by the website.

Thanks for the reply and info Ismael.

It would be great if this could be something considered as a new feature for a future version of the theme. Templates in Enfold are very easy to use and create. But as I mentioned, are just a bit difficult to manage and view when you have a longer list of them. So if there was a more robust way to view and organize them instead of a single dropdown, that would really help.

Instead of one list/dropdown, maybe the ability to manage them like menus in WordPress where there could be parent/child categories and display those with a dropdown or megamenu style would make it easier? I’m sure there are other and likely better options, so hopefully this is something your team will look further into.

Hey there. Quick update on what I implemented.

Things worked good. Just one issue – when viewed on a mobile device, the accordion titles don’t always open when clicked on. Sometimes they work fine, but then other times nothing happens when you click on them. Here are two pages where the accordion has been set-up and we are seeing this issue:

https://www.nicomit.com/
https://www.nicomit.com/services/managed-technical-support-services/

Any help would be appreciated. Thanks!

Thanks for providing that code Ismael.

Is there any documentation or info that you can provide when it comes to the requirement I described related to the page template? Anything along those lines that would help our development team would be great.

Thanks Rikard. It should be fine to close it.

Thanks Ismael. That worked and I am not seeing the bottom border under the current menu links in the dropdown. The padding looks to be different on those and not the same as the other links in the dropdown menu. There should be more space under the text when the darker background is displayed. It should have the same spacing/padding you see when you mouseover the other menu items in the dropdown. Can you let me know where to adjust that? Thanks for the help!

Hi Rikard.
You should be fine to close it.
Thanks.

Hi Nikko,
Two columns would be fine.
Thanks!

Thanks Ismael. That code should be added to the functions.php file in the child theme?

Do you know why that would be happening? We didn’t have this issue with any pages/posts on the website until the last week or so.

We updated Enfold approximately two weeks ago, but had to revert it back to the older version temporally when we found some issues. But have since changed it back to the latest version.

Thanks Ismael. That looks to have worked. The only thing outstanding is for longer list items, the second line of text is wrapping under the dash instead of lining up with the first line of text. This wasn’t happening before we updated the theme.

https://www.maritimetravel.ca/wp-content/uploads/List-Items.jpg

Thanks Ismael. That looks to have worked, but the dashes are displaying above the list items instead of beside them. See this screenshot:

https://www.maritimetravel.ca/wp-content/uploads/Updated-List-Items.jpg

I added the code to the media query for screens under 767px. So if you resize the Majestic Japan page, you will see the changes that have been applied with the CSS you provided. If you can help with getting the dashes to display beside the list items like a bullet would, that would be great. Thanks.

I just wanted to check to see if there was an update on this. Thanks.