BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty fifteen

Fixing Twenty Fifteen's Sidebar Header Image and Text Visibility Issues

20 threads Sep 16, 2025 Theme → Twenty fifteen

Content

Many users of the Twenty Fifteen theme encounter a common design challenge: the header image appears in the sidebar on wider screens, often making the sidebar text difficult to read. This is not a bug but a core design feature of the theme. The Twenty Fifteen team designed it so the header image is "Applied to the header on small screens and the sidebar on wide screens."

Why This Happens

The theme's layout shifts on larger screens. The content moves to the right, and the left column becomes a dedicated sidebar. The header image is set as a background for this sidebar, which can create a contrast problem if the image is busy or multi-colored, causing text in widgets to blend in and become hard to read.

Common Solutions

1. Improve Text Visibility with CSS

The most straightforward fix is to enhance the text's legibility against the background image using Custom CSS. This can be added through the WordPress Customizer under Additional CSS or via a plugin like "Simple Custom CSS."

Add a Text Shadow (Outer Glow):

.sidebar .widget {
    text-shadow: 0px 0px 5px #000000;
}

This code adds a dark shadow around all text within the sidebar widgets, making it stand out. You can adjust the color (#000000 is black) and blur radius (5px) to suit your image.

Add a Semi-Transparent Background Behind Text:

.sidebar .widget {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 15px;
}

This places a slightly see-through black background behind each widget's content, creating a clearer reading area. The last value (0.4) controls the opacity.

2. Reposition the Menu

If your navigation menu is overlapping a logo or name in the header area (as seen in Thread 8), you can add CSS to push it down.

.main-navigation {
    margin-top: 50px; /* Adjust this value as needed */
}

3. Add a Logo to the Sidebar

A frequent request is to replace the site title in the sidebar with a logo. The following CSS code will hide the text title and display an image in its place. Remember to replace the image URL with your own.

.site-title a {
    background: url("https://yourwebsite.com/path-to/your-logo.png");
    background-size: cover;
    width: 150px;
    height: 150px;
    display: block;
    text-indent: 105%;
    white-space: nowrap;
    overflow: hidden;
}

4. For Advanced Users: Disable the Sidebar Image

Some users may want to prevent the header image from appearing in the sidebar altogether and keep a traditional header (Threads 4, 13, 17). This requires more advanced modification of the theme's PHP, typically through a child theme. The process involves removing the action that adds the header image as a sidebar background. This solution is complex and carries a higher risk of breaking the layout if not done correctly.

Conclusion

For most users, the CSS solutions for improving text visibility or adding a logo provide a perfect balance of effectiveness and ease of implementation. Always remember to use a child theme when making code modifications beyond CSS to ensure your changes are not overwritten by future theme updates.

Related Support Threads Support