Home › Forums › Jevelin Theme › Sidebar width issue after Slider Revolution centering fix
Home › Forums › Jevelin Theme › Sidebar width issue after Slider Revolution centering fix
<p data-start=”219″ data-end=”254″>Hi Shufflehound team,</p>
<p data-start=”256″ data-end=”478″>I recently had support help me with <strong data-start=”292″ data-end=”313″>Slider Revolution not centering properly with the sidebar enabled on my site (http://www.apotheman.com). The centering issue has now been resolved — thank you!</p>
<p data-start=”480″ data-end=”648″>However, I’ve noticed a new problem: the <strong data-start=”521″ data-end=”560″>sidebar has become noticeably wider than before, which makes the layout feel unbalanced (content area is now too narrow).</p>
<p data-start=”650″ data-end=”808″>It’s possible this might be related to some <strong data-start=”694″ data-end=”708″>custom CSS I’ve added. Could you please review this as well to see if it’s clashing with the sidebar styles?</p>
<p data-start=”810″ data-end=”860″>Here’s the custom CSS I currently have in place:</p>
/* ========================================================
✅ 1. LOGO VISIBILITY
– Hide duplicate logos except when mobile menu is open
======================================================== */
.sh-sticky-header img[src$=”APOTHEMAN-LOGO.svg”],
.sh-header-wrapper:not(.sh-mobile-menu-open) img[src$=”APOTHEMAN-LOGO.svg”]:not(.sh-header-left-side img[src$=”APOTHEMAN-LOGO.svg”]) {
display: none !important;
}
/* ========================================================
✅ 2. LOGO SIZING (ALL MENUS / HEADERS)
– Force consistent size for all placements
======================================================== */
img[src$=”APOTHEMAN-LOGO.svg”],
.sh-header-mobile img[src$=”APOTHEMAN-LOGO.svg”],
.sh-mobile-header-logo img[src$=”APOTHEMAN-LOGO.svg”] {
max-width: 140px !important;
width: 90% !important;
height: auto !important;
max-height: 100px !important;
margin: 0 auto !important;
}
/* ========================================================
✅ 3. LOGO IN MOBILE MENU PANEL ONLY
– Smaller size inside the mobile drawer
======================================================== */
.sh-header-mobile-logo img[src$=”APOTHEMAN-LOGO.svg”] {
width: 80px !important;
max-height: 50px !important;
height: auto !important;
margin: 10px auto !important;
display: block;
}
/* ========================================================
✅ 4. SIDEBAR WIDTH
– Control the width of the left sidebar
======================================================== */
.sh-header-left-side {
width: 220px !important;
}
/* ========================================================
✅ 5. REMOVE THEME DEVELOPER COPYRIGHTS
======================================================== */
.developer-copyrights {
display: none !important;
}
/* ========================================================
✅ 6. SLIDER POSITION FIX
– Desktop: shift to account for sidebar
======================================================== */
@media (min-width: 1025px) {
.slider-center-fix {
margin-left: 220px;
}
}
/* ========================================================
– Mobile & Tablet: reset margin
======================================================== */
@media (max-width: 1024px) {
.slider-center-fix {
margin-left: 0 !important;
}
}
/* ========================================================
✅ 7. SECONDARY IMAGE CONTAINER
– Remove transform/transition effects
======================================================== */
.secondary-image-container img {
transform: none !important;
transition: none !important;
}
body.menu-fix-initializing .sidebar-menu {
visibility: hidden;
}