- This topic has 23 replies, 3 voices, and was last updated 3 years, 3 months ago by Elvin.
-
AuthorPosts
-
December 5, 2020 at 8:30 am #1568580Rylan Urban
Hello, I’m working on implementing flexbox, but there’s two-ish conflicts that I can’t figure out.
Float Site | Flexbox Site1) PHP Footer Widths. I was once recommended by GP to use this footer width snippet. How can I covert the code so that it works with flexbox? Or maybe there’s an easier way now? Sample code:
add_filter( 'generate_footer_widget_1_width', function() { return '45'; } ); add_filter( 'generate_footer_widget_1_tablet_width', function() { return '100'; } );
– You can see in the flexbox version, the footer widget widths are equal. The php doesn’t seem to apply.
2) The copyright area seems to reverted from full width to content width. I’m not sure how to change that back to full?
3) There is a third issue that I can’t nicely describe, and you won’t see it on the flexbox site. But I briefly changed the main site to flexbox and also noticed that all the menu items start on the left side of the page before ‘sliding’ to the middle on page loading. Any words of wisdom there? These three issues are likely it – so would be great to sort out!
Thanks!
December 5, 2020 at 4:01 pm #1568856LeoStaffCustomer SupportHi there,
1. This should help:
https://docs.generatepress.com/article/footer-widgets/#choosing-different-widths-for-each-widget-area-%E2%80%93-flexbox2. That is built with Lightweight Grid Columns which really isn’t the best method now – it’s using float instead of flexbox.
Can you try adding those three items as the footer bar widgets instead?
https://docs.generatepress.com/article/footer-bar-widget-area/Then I can give you some CSS to make them in one line.
3. That sounds like some sort of caching issue to me.
December 6, 2020 at 8:26 am #1569431Rylan UrbanThanks – check out the flexbox site now.
1) Perfect
2) Half way there:
2a How can I add the copyright symbol to the menu?
2b How can I remove the old copyright area?Thanks!
December 6, 2020 at 8:30 am #1569433Rylan Urban2b) I just hit spacebar and the text disappeared, then made the padding 0 to make it look like to wasn’t there. Visually it’s correct. But I’m not sure if that’s the best solution?
December 6, 2020 at 11:24 am #1569550LeoStaffCustomer SupportYou are just trying to replicate the float left right?
If so you can still use the default copyright field in the customizer for the copyright,
Then add a Custom HTML widget as the first widget in the footer bar widget area for “License under….”
Then add a Navigation menu widget as the second widget in the footer bar widget area for Privacy and Terms services.
Then try this CSS:
.footer-bar { display: flex; flex: 1; } .footer-bar .widget.widget_nav_menu { margin-left: auto; } .footer-bar .widget.widget_text { position: absolute; left: 50%; transform: translatex(-50%); }
December 7, 2020 at 6:11 pm #1571029Rylan UrbanHey – the menu is already added as a widget. That’s what you’re looking at! But that’s ok. I think this is what I want. Only thing – how can I add the copyright symbol as text?
December 7, 2020 at 6:23 pm #1571035ElvinStaffCustomer SupportHi,
Only thing – how can I add the copyright symbol as text?
You can paste this
©
or type it in its respective label field by using the alt-code ALT+0169.December 8, 2020 at 3:33 pm #1572151Rylan Urbanthanks!
December 8, 2020 at 4:08 pm #1572162LeoStaffCustomer SupportGlad we could help 🙂
December 12, 2020 at 2:16 pm #1577920Rylan UrbanHey last thing on this (see sitebox site above). I have two widgets in the footer bar: the lightweight social icons and the menu. Can I make these side-by-side? With the icons to the left, and the menu items centered in the rest of the space to the right? Is there a CSS for this, similar to https://docs.generatepress.com/article/footer-widgets/#choosing-different-widths-for-each-widget-area
Thanks
December 12, 2020 at 5:37 pm #1578020LeoStaffCustomer SupportCan you try setting the footer bar alignment to either left or right?
https://docs.generatepress.com/article/footer-bar-widget-area/#footer-bar-alignmentDecember 12, 2020 at 5:49 pm #1578029Rylan UrbanJust set it to left. You should be able to see the two widgets are stacked to the edge of the screen. Hoping to have them on the same line, within a reasonable content area or centered. Thanks
December 12, 2020 at 8:21 pm #1578097LeoStaffCustomer SupportCan you disable Autopimize so I can inspect the code better?
December 13, 2020 at 6:45 am #1578493Rylan UrbanYup – done!
December 13, 2020 at 11:15 am #1578906LeoStaffCustomer SupportOk set the footer bar alignment back to center then add this CSS:
.inside-site-info .footer-bar { display: flex; }
-
AuthorPosts
- You must be logged in to reply to this topic.