Aligning Header and Footer Wraps for Consistent Layout
Hi,
I'm having trouble aligning my header and footer wraps for a consistent layout.
Here’s a summary of my setup:
Header section: consists of 3 wraps, each set to 1/3 width.
Footer section: consists of 4 wraps, each set to 1/4 width.
The alignment between the header and footer appears off. I want them to be perfectly aligned so that the elements line up evenly across the layouts of all devices with a correct look.
Additionally, I’m concerned about how this alignment behaves when using a boxed layout. Could you please enlighten me whether the alignment approach differs between standard and boxed layouts? And If there’s a recommended method for ensuring consistency across all layout types, I’d greatly appreciate your guidance.
Above is a screenshot of my footer. The highlighted brackets indicate the approximate measurements the footer should have to match my header layout.
Thank you
Kind regards
Comments
Hi,
Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.
Thanks
Hi,
I have sent the updated login credentials for direct access through this link: https://themeforest.net/user/muffingroup.
My bad as I thought it had always been working! Let me know if you've encountered any login issues.
Much obliged
Here is your culprit:
Your Footer section has a custom width set. Change it to default, and it will have the same width as the header.
Best regards
Certainly, I fixed it that helped a lot! But the thing is that upon setting the payment methods icon element width to default two icons go beneath the others.
I would like to place all the icons in one single line, without getting them off the header template alignments.
Please check the following screenshot for a more clear view.
Thank you so much!
I have set the footer section's width to full width, and I have successfully made them in one line but they are still not in the same overall site layout especially with my header section elements.
How can I keep the same design, and add elements afterwards to the footer without causing any distortion after the alignments?
Reference :
Thank you
Kind regards
Do you need these empty wraps in the middle?
You can remove them, and instead set two 1/2 wraps in the footer, so you will not have any distortions.
Best regards
No, I actually don't need them, I have fixed it following your instructions it helped a lot.
Thank you so much
Appreciate it
You are welcome.
Please let me know if I can help with anything else.
Best regards
Sure thing!
I'll make sure I'll get back if there's anything
Hi,
I'm currently trying to replicate the style of my default header for the sticky header so that both appear identical. I'm aware that the default and sticky headers are edited independently in BeBuilder, and each needs to be customized separately.
However, I'm running into an issue where attempting to center the menu elements in the sticky header doesn’t seem to work, the elements don't align to the center, and they’re not spaced as closely together as they are in the default header.
Could you please let me know if I might be missing something or doing it the wrong way?
Thanks in advance for your help!
It was because the following option was selected earlier:
I changed it to default, and back to center, and it works properly now.
Please check it out.
Best regards
It is working properly now, thank you for your help!