Search code examples
htmlcssmenuparallaxnav

PArallax website menu works perfect with text, NOT so with image (will not shrink)

Ok, I have been given a website from a friend who wants to make a simple change... or at least that is what I thought.

I have done loads of changes so far... it is on a temp server at http://salonesvip.mindworks.cl/Concepto_01/

Now, Top left in the nav bar is where the logo is.

IF the logo is text, then it shrink perfectly when visitor moves down page... but when I place an image... it stoops the "shrinking" effect.

In the CSS there is:

/* -------------------------------------------------- */
/*  Logo
/* -------------------------------------------------- */

#logo,
#navigation {
    display: inline-block;
    vertical-align: middle;
}

    #logo {
        margin-bottom: 0;
        font-family: 'Julius Sans One', sans-serif;

        -webkit-transition: font-size .25s ease;
                transition: font-size .25s ease;
    }

    .transparent #logo { font-size: 44px; }

        .transparent #logo a { color: #fff; }

    .header-shrink #logo { font-size: 28px; }

        .header-shrink #logo a { color: #fff; }

This means it works for text... but not when I simply add an image in Dreamweaver.... any help would be great.

Solution

  • i think you are using image and giving width and height but on the website the font changes at two different places 

    .transparent #logo {
    font-size: 44px;
}

    and when the header becomes small the font size is decreased

    .header-shrink #logo {
    font-size: 28px;
}

    so you can give specific height and width for image in this two classes so that it will adjust at all the places full and shrink