Mobile version of header

Support
#1

Hi,
This pertains to my other website. I’ve created a header which looks good on my laptop, ok on the different screen size options when I edit it on my website and push the button that is meant to show what it will look like on mobile the search and shop icon go below, slightly covering the title which isn’t ideal, but is ok. BUT when I look at it on my mobile phone the second bar content gets cut off and you can’t see all the content. How do I make it more mobile friendly?
Thank you,
Jane

#2

Hi Jane,

Your site is returning a 403 error.

Please contact your host and let them know about this error or you can try fixing it using the guide below.

Thanks

#3

Hi Paul,
Apologies - that’s now corrected. I’d be grateful for your assistance.
Kind regards

#4

You’re welcome!
We’re glad we were able to help you out.

#5

Hi RueNel,
The original problem has not been addressed, just the 403 error which was preventing access to the site, so you could see the problem. I’d be grateful if you could address the initial problem still.
Thank you

#6

Hi There,

To fix this issue, please follow these steps:

  • Change the height of your bar to auto:

  • Check on the Wrap Children option under Flex Layout:

  • Add the top & bottom padding to your bar:

  • Add this element CSS to your cart & search icons:
@media (max-width: 767px){
  $el {
    margin-top: 15px !important;
  }
}

Hope it helps :slight_smile:

1 Like
#7

Thanks! That worked really well. I didn’t use the CSS because I decided to shift the search/shop button to the top to allow for more room. I followed your advise otherwise and it looks much better but when I use a small mobile phone screen (in real life) the middle button is much shorter than the buttons either side and some of the words get cut off. Is there anyway to scale the buttons so they are the same height (regardless of whether one does the flex children thing and turns itself into two lines)? And is there a way to scale the font size of a button so it gets smaller when viewed on a small screen? I’ve noticed that on my footer as well. The button stays disproportionately large while everything else gets smaller.
Thank you for your help.

#8

Hello Jane,

The buttons has a different size because the text goes to the next row which resulted to the difference in height. To resolve this, you may add this custom css in your header builder custom css section:

@media(max-width: 480px){
    .x-anchor.x-anchor-button {
        min-height: 55px;
    }
}

Hope this helps. Kindly let us know.

1 Like
#9

Thanks, this is what it is looking like with the CSS, the fundraise button is being cut off and it’s smaller in height than the others. Is there anyway for the font to decrease in size on a mobile and for the height of the middle box to be the same as the others? I’m very grateful for any help you can provide

#10

Hi Jane,

Because the row container is small enough, the buttons no longer fit into the space. I would recommend that you duplicate the bar and this time around you will display the buttons stack to each other. Your can then hide/show the bar by utilizing the “Hide During Breakpoints” option which can be found in the “Customize” tab of the bar settings.

We would be happy to assist you further. Please change the role of the given user as an Administrator so that we can edit your header.

Thanks.

1 Like
#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.