Change Menu Background Image Position

I figured out the float solution. It doesn’t work the way I was hoping it would. I’ve brainstormed another solution and I’m not sure if this should be a new topic or not.

I’ve made the background a solid colour and I’ve created a background ‘panel’ image that is a transparent png to go behind the logo. I’ve added the panel to the background of the logo using the following CSS:

.logo a {
    overflow: visible;
     display: block;
    height: 100%;
    float: left;
    left: 0;
    z-index: 1;
    background: url(https://hotspotcreative.ca/testsites/apexsolar/site/wp-content/uploads/2018/03/apex-logo-bg-panel-01.png);
    background-repeat: no-repeat;
    width: 464px;
    background-position: -120px 0px;
}

I have the panel shifted to the left so that I get a nice clean white edge on smaller screens but on larger screens it should show the whole panel.

The problem I’m having is that the entire panel is not showing because of the container. I’ve tried setting the overflow to visible but it doesn’t seem to have any effect. Does anyone have a suggestion on how I get the whole image to show?

The problem with doing it that way (at least when I tried it) is that it will always be inside the container. I actually want it to hang outside of the container on the left. Here is a sample of what I am going for:

[img]https://thumb.ibb.co/j0U8Pc/apex_nav_sample.jpg[/img]
https://ibb.co/j0U8Pc

I just need to figure out how to make the overflow display the part of the the panel that is currently hidden. Is it something that is possible?

• This reply was modified 6 years, 8 months ago by hotspot01.

That worked wonderfully!! Thank you so much.
Ok. I have one last question. Is it possible to only get the bg panel to show when the page is scrolled similar to the way the coloured logo shows up? or does the ‘transparency logo’ just cover the regular logo?