Hi Calin,

Thanks for the code. I’ve added it to Custom Code > Advanced > Desktop and iPad Landscape, but it’s still not working correctly for the Projects section – please see links, as before.

Many thanks.

Hi Anamaria,

Thanks for the info.

Unfortunately the code doesn’t quite work, it looks like the following is overriding it. There may be other things too, so I thought it best you take a look:

@media (min-width: 1164px)
.td-boxed-layout #td-outer-wrap .td-header-desktop-sticky-wrap, .td-boxed-layout #td-outer-wrap .td-header-mobile-sticky-wrap, .td-boxed-layout #td-outer-wrap .tdc-row-is-sticky {
width: 1164px !important;
}

I have added the supplied code to my site (links as before), but you can also see what’s happening on your demo site (which still needs to be fixed).

Many thanks

Hi Calin,

I’ve added your code as described – it seems to work fine for all pages, except for sticky header within the Projects section – see below:

Section Page
Project Page

Please advise.

Many thanks

Hi Calin,

Thanks for the code, I will add it for desktop and ipad landscape.

Any idea if/when your request (option for background to apply as before) might get implemented?

Thanks

Hi Calin,

Thanks for your reply. I’m not sure I fully understood it though, but not to worry.

Yes, an option to put the background back as it was, would be good. In the meantime, if you could provide the necessary CSS, that would be appreciated.

The website can be found here. However, this site is not ‘broken’ – I rolled back to the previous version, as the site’s live and cannot be left showing errors.

I applied the update to a staging site, which you can see here. Alternatively you can see the issues on your own ‘Construct‘ demo site.

Many thanks

Hi,

What other details would you like? The nav bar fits the boxed layout fine, until you scroll down the page and see the sticky header/nav bar. The sticky header goes beyond the right-hand edge of the boxed layout in both tagDiv Composer (as per the above image) and the live page as well. Essentially it doesn’t respect the container width, padding or margins.

I can send you a link to a live page if you want to see it in action (it’s the same template, just different font/colour), just let me know and I’ll send a link via email as the site’s not public yet.

The setting you highlighted in your image shouldn’t have any effect, as it’s just a password manager browser extension and doesn’t actually add anything to the field unless clicked – not sure why it’s showing up, but the field is empty. The only way to avoid it, would be to use a private window or a browser that doesn’t have the extension, but as the field is empty, I can’t see this having an effect.

Thanks.

Hi Calin,

Thanks for your response, but I’m still getting the same issue. I’ve checked my header settings are as per your images – still doesn’t work.

I’ve also imported a fresh ‘Template 25 – Overlay’, the imported settings are as per your images, but I get the exact same issue. The only change I made was to the background colour, so you can see it in the below image.

Hi,

Setup is as per your requirements, I had already followed your guide. TagDiv Composer has been slow since it was first installed; straight install, only the required plugins, no child theme, cache cleared, latest WP, etc.

Can you help?

Don’t worry, I figured it out…

Hi Vlad,

I’ve set it any and everywhere that setting appears and in every combination. Likewise with the imported layouts, the settings must be correct in the original downloads, but still they don’t work – then I try all other combinations and still nothing.

I’ll email you direct, as requested.

Many thanks.

Hi Vlad,

Ok, after much head scratching and page testing, there is definitely something wrong with my theme.

1) Even if I import a page or section template in tagDiv Composer and do nothing to it, except save and view. None of the rows will display as full width. This is the case in Composer and the page itself.

2) I created a new footer page, using an imported template with a similar layout to my own (1 row/3 columns for the footer, 1 row/2 columns for the sub-footer). I did nothing to it, except set the sub-footer menu and reduce the font size.
– The result: in tagDiv Composer, the columns are stacked in both the footer and sub-footer and neither row shows as stretched. When viewed in situ on a page, the rows and columns behave as they should and align horizontally. Small win…
– For some reason, the last couple of days the import feature isn’t working properly either. When I click the button to import, the confirmation box appears behind the import modal – the only way to click OK is to add display:none to the modal via Chrome Dev Tools.

3) Unfortunately, #2 only works with pages created using tagDiv Composer and WPBakery. Any pages created using Gutenberg, seem to break the footer CSS. The page structure (for the footer section/page) is the same, but some of the same CSS is being overwritten, as it appears to come after in order of specificity. In Chrome Dev Tool, the ‘winning’ styles appear above the ones being overwritten.
– In pages created using tagDiv Composer or WPBakery, I still can’t get any rows to stretch no matter what I do (believe me, I’ve tried!).
– The only way to get stretched rows of any kind, is to build pages using Gutenberg Blocks and plugins. Which is why all of my pages are showing a broken footer, because I had to go back to basics as the other 2 methods are currently unusable.

The solution:
#ti-copyright-footer .td-pb-span6 { width: 50% !important; }

I’ve added the code to the Live CSS window for the footer page and given the row an id, so it won’t conflict with anything else (hopefully). It feels like a bit of a hack, as I’m not a developer and generally wouldn’t mess with the structure of a page, for fear it’ll mess up it’s responsiveness (media queries, etc). I haven’t tested that yet, but it’s nearly 1am, so that’s it for now…

I’m hoping this level of detail might give you a better idea of what’s going on, so that you can help me resolve it properly. I’m not convinced that’s the best fix (it was way too easy), unless you can confirm it won’t effect anything else on the site. Or perhaps you can come up with a cross device/cross platform solution?

Many thanks.

Hi Vlad,

That’s what I did, it was certainly working across the site in the beginning and it still is on one page. However, on the pages that are broken .td-pb-span6 is being overwritten by .vc_column_container: 100%, whereas on the page that is displaying properly, it applies the 50% width (I can send you screen grabs, if you like).

I’ve just checked in tagDiv Composer – the outer row is set to 1 column, stretch row and content (with padding). The inner row is set to 2 columns, full width content. Shall I recreate it, as just 1 row with 2 columns? I’m worried something will break if I start messing with it.

I don’t understand why the 50% width is being overwritten on all pages, except one. Is that not weird?

Thanks

Hi Vlad,

No, I’ve seen this answer before, so it hasn’t really helped and you haven’t commented on the issue with the footer.

I don’t need the whole site to be full width, I just need the odd row to stretch to full width, ie to accommodate a background image or colour. To clarify, if I have a page with 8 rows and want one row @ full width, I must select each row individually and set it to stretch (whichever setting is appropriate, as long as it’s not the default). Is that correct?

What about the footer ‘page’? It consists of only 2 rows, both are obviously set to stretch, but it doesn’t show as stretched in tagDiv Composer – is this the way it’s supposed to work? Thankfully it does actually stretch on the page, but as detailed above, the 2 columns in the sub-footer are stacking, instead of showing inline (even though it was fine before and hasn’t been changed).

Any thoughts?

Hi Vlad,

Thanks for jumping in! I’m working locally, so can’t share a link, but I think I’m good with the code I posted. I’ll pop back here if I run into problems…

I just thought as every theme has it’s own structure and naming conventions for key elements, it would be helpful to have the correct/best code snippet available in the forum.

Cheers!

Hi,

Thanks for the feedback.

The code in my reply seems to work fine, but I just created it quickly using the browser’s inspector. Just want to know if I’m targeting the most appropriate classes to get the job done (I like to do things the right way, if possible).

It must be a fairly common thing, so I thought it might be useful to have the correct code (from the source) somewhere in the forum, so others can find it too.

Many thanks!

Ok, that might be helpful – thanks.

I know there are a few techniques out there, but I haven’t looked at the code with regard to this yet, so don’t know how they would work with the theme’s structure.

I’ll cross that bridge if and when I come to it, but if you have any tips on how to code it, others may find it helpful.

Thanks 🙂

Wow, really?! (sorry – I just came across this)
Are there any plans to add this or can your offer some advice/code to help us out?

Many thanks 🙂

Hi Calin,

Thanks for getting back to me. So, this can only be done via tagDiv Composer, is that correct?

I have some pages built using the standard WP Blocks Editor, presumably I can target those pages and simply hide the elements using the following code, or would this cause problems?

.tdc-header-wrap {
  display: none;
}
.td-crumb-container {
  display: none;
}
.td-page-header {
  display: none;
}

Many thanks!

Excellent! Thanks for confirming 🙂