Hi,
I have a problem with the header in that I cannot seem to follow the suggestions to make my header responsive.
My website is www.outdoomodularspaces.com.
I’d be really grateful for any help / assistance with this - although I built the site, I’m not a techie so please would you break it down into Lehmans terms for me 
Thank you.
Hey Oliver,
Your website is down not just on my end but for others as well so I couldn’t check the issue. Please have your web host fix this first.
Once your site is up, please also perform the applicable troubleshooting steps listed below.
Thanks.
Thanks @christian. I seem to be having issues with the hosting company dropping out frequently. I’ve just checked and it’s up and running and will run through the above links too.
Hey Oliver,
I also tried to check your site and it’s not reachable on my end as well (see screenshot)
You might have IP restrictions active, you can temporarily disable the security so we can take a look at your setup. In the mean time test for the steps mentioned by Christian in the previous post.
Let us know how this goes!
Hi Oliver,
Please let us know once your site ready to access, so we can check the issue you are having.
Thanks
Hi @tristup
The site is active now - www.outdoormodularspaces.com
Please would you confirm you can access it.
Thank you.
Oliver
Hi Oliver,
The site is now accessible, and the issue can be seen.
The Content Scrolling attribute should be off, Flexbox > Wrap option should be enabled for the header Bar and your header height should be set to auto to get rid of this issue.
Please find the screenshot describing the settings.
Hope it helps.
Thanks
Hey Oliver,
I just want to add here that the header will be responsive if the user chooses it to be responsive. Because the layout of the header is powered by Flexbox, you need to understand how the Flexbox options work. You can learn here https://theme.co/docs/use-flex-layout
Thanks.
Thanks @tristup I have now changed this. Unfortunately, it hasn’t changed when using a phone or tablet. I will look up @christian link and if it’s ok come back with any questions
@tristup @christian
I’ve watched the link on Flex Layout, however, Self Flex does not appear when I am checking the bar/containers - why is this?
I believe that I’ve checked each bar and container, checking the “wrap” box, setting the header height to auto and where there is the content scrolling attribute, ensuring this is set to off.
I’ve included a Loom of what I’m seeing.
Hello Oliver,
In order to help you further with your concern, Please share your details in a secure note. Please provide the following details
You can find the Secure Note button at the bottom of your posts
Thanks
Hello Oliver,
I have logged in and checked your header which seems to be perfect already on desktop screens. The problem is that as soon as you view the site on a smaller screen, the header is not responsive. As to what @christian has already said that “the header will be responsive if the user chooses it to be responsive”. This means that your header is designed for desktop screens. What you need to do now is to insert another bar and design your header specifically for the smaller screens. You can show or hide the corresponding bars in specific screen size by utilizing the “Hide During Breakpoints” option. To learn more about this, you can check it here:
As for the elements, the navigation inline element is only good for desktop screens. For smaller screens, you will have to add navigation layered, navigation modal, or navigation collapsed element.
Hope this makes sense to you.
Hi @ruenel,
Thanks for this. I’ve followed your instructions and have now changed it.
Thank you for your and your team’s help with this (and your patience!).
Oliver
Hi Oliver,
Glad that we are able to help you.
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
