Mobile Button in Header

Support
#1

www.whitneymorgan.photography

When looking at my website on mobile, the button to the right of my header (Pricing/Contact Us) is very large is pushes the hamburger menu to the left of center of the page. Is there anyway to shrink that button just for mobile?

Thanks!

#2

Hey @brockburwell.

You can use media query to shrink the button just for mobile, CSS media query is being used to make website responsive for small screens.

For example take a look at this CSS code.

@media only screen and (max-width: 500px) {
     .hm6.x-anchor {
           font-size: 10px;
      }
}

If the browser window is smaller than 500px, the font size will change to 10px which will result in shrinking button size.

Use media query breakpoints as per devices you are targeting.

Regards

#3

So can I add the code you included to fix this issue or do I need to go in and use media query?

#4

Hi There,

On The Header Builder - You can click on your button and click on tab customize and choose to hide it on mobile.

You can add a bar above your navigation and logo bar with your contact number so people can call you from mobile instead, and this bar you can hide on every screen but mobile.

Hope it helps