[Resolved] Float right plugin exceed width layout

Thanks 🙂

If you don’t already have a Custom CSS plugin installed, go to Plugins > Add New and search top right for Simple Custom CSS. Install, activate and then go to Appearance > Custom CSS, insert:

/* Overflow Control */
body {
	overflow-x: hidden;
}

Phew, so this plugin adds 3258 new lines of CSS. It’s pretty heavy if all it’s offering is the floating bar on the right. Most of the time this plugin does the right thing and prefixes it’s CSS rule name so as to not conflict with themes or other plugins, but other times it doesn’t. Deep in the CSS for this plugin is the following rule which is causing the menu issue:

.scale, .scale-div {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

Ultra uses the class scale too which is where the conflict is. You can try inserting the following at Appearance > Custom CSS to fix this:

/* Plugin Conflict Fix */
#masthead .scale {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

No problem 🙂

Try this:

/* Plugin Conflict Fix */
header.scale {
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -o-transform: scale(1) !important;
    transform: scale(1) !important;
}