Change background on a specific widget/menu

  • I am using the Picture Perfect Real Estate child theme with the Genesis parent theme. There is a custom menu on the right hand side that should have a white opaque background but instead it has no background at all. Because of this the text is hard to see on the menu. My page is https://www.glennmilgram.com. An example of what it should look like can be found at https://pictureperfect.aethemes.com/. I am not a programmer and this is my first site so if you can give me everything I need to paste into the JetPack Custom CSS Style Sheet editor that would be much appreciated. FYI, I believe the navigation menu I am trying to edit is #nav_menu-3. Thank you! You may want to check this though. Like I said, I am a beginner.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hello glennmil. First off, new site looks great. That’s a really nice theme.

    I see the white background is working properly on the internal pages. Might be a plugin issue. I’m looking at the CSS now. I’ll report back if I can figure it out.

    Thread Starter glennmil

    (@glennmil)

    Thanks lorbach! Much appreciated.

    hi glennmil,
    Just add this css to your custom.css hopefully it’ll help you

    .home .sidebar {     background-color: #FFFFFF;}

    Your markup looks very different from the markup in the example site. The example site has a <div class=”main”> div with a child div with a class of “home-right”. It’s that home-right div that gives the white background. But on your page, the element that contains the sidebar is a sibling to the div.main element… it’s an “aside” element with a ton of classes applied to it.

    Not sure why there are differences, but I think if you add the class “home-right” to that “aside” element, it will give the translucent white background you’re looking for.

    Thread Starter glennmil

    (@glennmil)

    Thank you Virendra. That worked great. I tweaked it a bit to make it opaque.

    .home .sidebar {
	background-color: #FFFFFF;
	opacity: .8;
}

    Thread Starter glennmil

    (@glennmil)

    I Virendra. I noticed that when I use the code above not only was the menu opaque but so was the black lettering making it a bit difficult to read. I found the below code and it preserved the lettering while still making the white background opaque.

    `.home .sidebar {
    background-color: rgba(255,255,255,.7);
    }`

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change background on a specific widget/menu’ is closed to new replies.