I’m having an issue with front end of site not displaying what is formatted in the back end using header builder. It seems to be a flex layout issue but I cant seem to get control of it. The container is out of place. Need to get it pulled back.
View from header builder:
View from front end:
Another thing that is not right is the interaction with the menu links should be full height of the row…
Thanks,
Mark
Hi There,
/wp-admin login link seems to be disable.
Please provide the correct login link so we can take a closer look.
Thanks!
I apologize. You should be good now. I forgot I had a plugin that was disabling your login.
Hi,
I could not find the header that you are using on the front page, but I notice you have the header used on your page new-services, which is exactly the same, https://integratorx.io/new-services and it works well, you can either compare the settings between these two headers or clone the working header or assign it to your front page.
https://integratorx.io/x/#/headers/647/inspector
Hope it helps
Hello,
Ok thanks for your suggestion. However now after making edits to the second header… that header is now having the same issue as the original header discussed in this thread. Now for both headers the front end is not displaying what is formatted in the back end using header builder (as shown). What am I missing?
Hi @xpndpossible,
Your using Fullscreen layout for your slider. That is normal behavior since the Preview area is short. To understand what I mean, please play the screen recording below.
Thanks.
Thanks for your response, however my only concern here is with the header builder. Once again, the issue I am having is that the layout that is presently formatted for the header in the back end using header builder is not the way it is being displayed on the front.
I am trying to get my header to spread out full screen on the front end (everything was fine but something happened). You’ll see that logo, navigation, and button are all pulled in to the center of the screen on the front end. (That is not the way I want it to lay out)
But on the back end everything is laid out as it should be - Spread out full screen - logo is at the edge of screen on left and the navigation and button is at the edge of screen on right; and that is the way I expect it to look when I view it on the front.
What I am trying to resolve is… Did something break in it? Do I need to rebuild the header? Or is there something else that I am missing? So that I don’t run into these time wasters in the future…
Thanks
Hello xpndpossible,
I understand your point, I had the same issue. I solved it playing around with the flex setting.
this link help me a lot https://css-tricks.com/snippets/css/a-guide-to-flexbox/
First, try changing the settings Center, Space Between, Stretch, etc, in the Bar, then the container, then the element,
In your case the Logo.
Careful if you click on text settings to center or justify.
check if wrap children, reverse layout are checked, play with them checking/unchecking.
In the Container, check the Self Flex preset, I use Standard and it works for the most of my Headers, any other preset makes a big difference.
In the Logo, check in Setup, if it is Scaling or Standard.
I attached some screenshots of where to look.
My point is that even though, you change settings in these spots and they may look the same in the back end; in the front end they look different.
Good luck,
Bogar
@xpndpossible, sorry for the confusion. I’ve investigate further and found out you have HTML syntax error in your content.
That is causing the issue.
I corrected that HTML and cleared the cache and it works now.
@bogarguz, thanks for sharing.
Thanks! Very much appreciated!
Thanks for sharing!
On behalf of my colleague, you’re welcome. Cheers! 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.