Full Width site and CSS problem with V5

[Weaver]

@scrambler:

I noticed that you forgot to add the align option “Extend BG to full width” in the menu align option

No – not forgotten, just no longer an option. All the “Extend BG” settings are automatically converted to alignfull during the conversion process.

[jsternfe]

Ha, that got it, thank you @scrambler!  One of my three sites uses left and right sidebars as well as this CSS setup, will I need additional changes or should what we’ve done here work?

 

[scrambler]

@weaver Let us clarify.

“Extend BG to full width” is NOT at all the same as Alignfull.

Extend BG to full width keeps the content narrow and only extend the background color to the edge of the browser. Alignfull extend everything including content to full width.

You have actually added a New option for “Extend BG to full width” to all the other elements like Wrapper, header, footer, etc…

But you forgot to also add it to the menu bars

[scrambler]

@jsternfe as far as the wrapper width rule, that should work regardless of the sidebar configuration

[Weaver]

@scrambler –

There is no need for Extend BG to full width for menus. I didn’t read the conversion code close enough in my first answer, but the conversion picks the appropriate Align Menu option.

But during my testing, I’m pretty sure that Extend BG for menus yields identical results to an appropriate existing Align Menu option. At least that’s what I got by testing with wvrx-fullwidth in the add class box.

 

[scrambler]

@weaver, we should take this off line, I will email you.

[Weaver]

@GR8FL:

See my last reply to scrambler.

I believe that the V5 Menu Alignment Options should replace any need for wvrx-fullwidth. This is good because wvrx-full width is done via JavaScript which can lead to detectable screen refresh blips.

If your sites did not convert the menus, there could be a bug in the v4 to v5 conversion code, although I can’t spot it at the moment.

[GR8FL]

@weaver, my site did not convert the full menu automatically. I added wvrx-fullwidth to menus > primary> menu bar class and that fixed it.

I also have two other sites using similar layouts and they did not convert. In each case, I added wvrx-fullwidth to menu bar class and to header image area. Then all was good.

Thanks.

 

 

[jsternfe]

@weaver and @scrambler, I have updated all three of my websites to V5 and they all look fine, including the one with two sidebars, so thank you very much and this issue is resolved as far as I am concerned.  However, @weaver you may wish to check your v4 to v5 conversion, because:

“@jsternfe my bad I did not realize the background was on the wrapper.

Do the following instead.

• Remove the 10% L/R padding on the wrapper
• In the wrapper align option select center instead of alignfull
• in the Wrapper “Theme Width” box type 10000 (Site wide spacing in the customizer)
• Add your old 80% rule back.”

The wrapper align option was set to center in v4 before the upgrade to v5 and the conversion seems to have switched it to align full.  Not sure you want that…

-Jon

 

[scrambler]

@jsternfe

You may have been using a full width setting inside the Full Width option page. If so that would explain why it was converted to alignfull when the Full Width options were removed.

[Author]

Posts