Social icons are changing shape at some break points?

Support
#1

at the first break point of my site, the social icons in my header turn skinny and not round:

here’s a screenshot: https://i.imgur.com/rm7CzY0.png

and here’s the url:

how can i fix this in pro so the social icons stay perfectly round at all breakpoints? thanks

#2

Hi there,

Please kindly go to the Social Elements one by one in the Header Builder and change the Border Radius option to 50%:

That should do it. Thank you.

#3

After updating the border radius on all social buttons to 50%, the issue is still the same.

#4

Hi there,

Please clear your browser cache and test it again. Here’s how it renders on my end.

Hope that helps.

#5

What is the width of the browser with the screenshot you provided?

This is 1110px in Chrome:

[Album] Imgur

This is 1000px in Firefox:

[Album] Imgur

This is 985px in Safari:

[Album] Imgur

All seem to have radius issues (cache cleared again, in browser and on server).

#6

Hello There,

The icons seems to look like they are squeezed because there is only a small space left for the icons. Please change the font size of you menu and adjust the left/right padding of the menu items to increase the spaces for the icons.

Hope this helps. Please let us know how it goes.

#7

how can i change the navmenu font size but only at the smaller breakpoints where this issue takes place? thanks

#8

Hi,

To achieve that, you can add this in Header > CSS

@media(max-width:767px) {
.hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
   font-size:18px;
}
}

@media(max-width:480px) {
.hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
   font-size:14px;
}
}

Change the font size as you like.

Thanks

#9

Hmm, this didn’t seem to make any changes, even when I added !important to each font-size

Screenshot: https://ibb.co/neZNjm

#10

Hello @COK,

Please try using following CSS instead and let us know how it goes.

@media only screen and (max-width: 768px) {
  .hm10.x-menu span.x-anchor-text {
    font-size: 10px !important;
}
}

@media(max-width:480px) {
.hm10.x-menu span.x-anchor-text {
    font-size: 10px !important;
}
}

Thanks.

#11

Unfortunately this also did not work. I’ve cleared both browser and server cache.

#12

Hello There,

Sorry if the code did not work. Please make use of this code instead:

@media (max-width:1100px) and (min-width: 980px) {
  .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
    font-size:18px !important;
  }
}

Hope this helps. Please let us know how it goes.

#13

This mostly works but at 1078px width it’s jumping back to the larger navmenu font and showing it at the same time as the mobile menu, here’s a screenshot:

#14

Hi There,

Please set your buttons to have an equal fixed width and height, so they don’t respond to its container width. They stay a perfect circle. Use the PX unit.


Hope it helps,
Cheers!

#15

I’ve already done this (32 x 32)

#16

Hello There,

The mobile menu will only appear when the screen size is below 980px. It will not display in 1078px. Most the font size change is already covered in this code:

@media (min-width:980px) and (max-width:1100px) {
  .hm5.x-menu > li > .x-anchor .x-anchor-text-primary{
    font-size:20px !important;
  }
}

@media(max-width:767px) {
  .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
   font-size:18px;
  }
}

@media(max-width:480px) {
  .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
   font-size:14px;
  }
}

Please make sure that all your css are correct and no css conflict is happening on the page. The best css practice is to have your code indented and @media blocks should always be at the bottom of all the other codes.

Hope this helps.

#17

Same as before. Around the 1078px breakpoint the mobile nav menu is showing at the same time as the standard / desktop nav menu text and social icons. Please make your browser width around 1075-1080px and you’ll see the weird jumping issue I’m referring to.

Here’s a screenshot:

Code is at bottom of my CSS. Cache cleared on server and browser.

#18

Hello There,

I cannot replicate your issue. When I view your site in 1078 pixels, this is what I am seeing:

I am using Chrome by the way.

#19

Can you please look between 1070 and 1080. I might be off a pixel or two from 1078. It’s happening for Chrome for me on multiple machines.

#20

Hello There,

I am using Chrome and this is how your site looks like: