Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #920553

    I have an image in the background of my menu area on a site that I’m working on. The way it is designed it causes issues on larger screens because it sticks to the left side of the screen. See attached images.

    How it looks on larger screens https://ibb.co/d973v7
    How it should look https://ibb.co/egkCoS

    Can someone help me with how I can make it so that the background image will stick or ‘Float’ to the right of the screen instead using css? I can’t seem to find the right selector.

    • This topic was modified 6 years, 8 months ago by hotspot01.
    #920671

    Hey Chris,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #928337

    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?

    #929169

    Hi,

    Have you tried to use the background position in % instead of px or you can even try 10vw which is 10% of the viewport width so it maintains a constant distance.

    Best regards,
    Vinay

    #930288

    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, 7 months ago by hotspot01.
    #931057

    Hi,

    Please try to apply the panel background in the .logo container instead of the logo link then push the logo link towards the right.

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

    Best regards,
    Ismael

    #931709

    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?

    #932389

    Hi,

    We are afraid that is not possible. At least not easy with some extra JS.
    You would need to hire someone who would be able to help you out with it.

    Best regards,
    Basilis

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.