Docs

[Wardo_SD]

After a recent xtheme update I started having this problem with my superfly menu. When the window is taller than a certain amount, extra right margin is added to the superfly menu when it is open. This causes the thin dark text to display over the body of my site and is unreadable. How can I get rid of that media query? ( I think it’s probably a weird media query causing the issue.)

Thanks for your help!
my url is http://maxraye.wpengine.com/

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.sfm-pos-right .sfm-style-skew #sfm-sidebar .sfm-social, .sfm-pos-right .sfm-style-skew #sfm-sidebar.sfm-compact .sfm-logo, .sfm-pos-right .sfm-style-skew #sfm-sidebar.sfm-sidebar-exposed .sfm-copy, .sfm-pos-right .sfm-style-skew #sfm-sidebar.sfm-sidebar-exposed.sfm-theme-bottom .sfm-nav, .sfm-pos-right .sfm-style-skew #sfm-sidebar.sfm-sidebar-exposed.sfm-theme-top .sfm-nav, .sfm-pos-right .sfm-style-skew.sfm-sidebar-always #sfm-sidebar .sfm-nav {
  width: 275px !important;
}

Hope this helps.

[Wardo_SD]

Thanks Rupok! It worked well. However, it brought up a small problem as a result. Now the social icons fall outside of the diagonal border of the menu. Before, they word-wrapped to fit in the container. Is there any way I can get that functionality back? Thanks!!

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

#sfm-sidebar .sfm-social li {
    width: 32px;
}

Hope it helps

Joao

[Wardo_SD]

Hello,
I’m sorry but that did not fix the issue. I have attached a screenshot of the result. It only changed the width of the hover effect of the social icons. They still fall outside of the diagonal superfly menu area.

[Joao]

Hi Wardo,

On my end it seems that it worked and as your picture did not upload (needs to be up to 500kb) I am not sure what you are referring to.

Image one attached show how your website looks now with the code above, and image 2 how it looked before without it.

Please clarify your issue in order that we can help,

Thanks

Joao

[Wardo_SD]

I have attached a new screenshot to show you what I mean.

[Rad]

Hi there,

You mean to vertically align them so it won’t overflow? Just like menu items, they are vertical. If yes, then please change it to this CSS.

#sfm-sidebar .sfm-social li {
    width: 32px !important;
    display: block;
    float: right;
    clear: both;
}

If you wish to compress it without vertical alignment then we have to make those icons too small, and that’s not looking goog.

Thanks!

[Author]

Posts