Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #26987

    Hi there

    Great theme.

    Is it possible to force the logo to overlay over ALL elements, to the top?

    Heres my site

    http://www.thenaturalpharmacie.co.uk/hidden/

    And heres my custom CSS that doesnt work

    logo img

    {

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 0px;

    display: block;

    width: 230;

    height: 230;

    max-height: 250%;

    z-index: 10000 !important;

    }

    #132337

    any advice help please?

    #132338

    1) You must add px or % to your width/height attribute. Just 230 is not a valid syntax and it must be 230px or a % value.

    2) You can’t do this if your logo has a relative position. A solution would be to set the position to “fixed” with following css code

    .logo img {
    position: fixed;
    width: 230px;
    height: 230px;
    }

    Maybe you need to use a media query to set the position to “relative” on small screens – otherwise the logo is not “responsive”.

    @media only screen and (max-width: 768px) {
    .logo img {
    position: relative;
    }
    }

    #132339

    Thats great, thank you.

    Is it possible to resize on scroll still?

    #132340

    Yes you can use the header-scrolled class to resize the image as soon as the user scrolls down. However it will “jump” a bit and you won’t get the same nice resizing effect with a fixed logo. Use following code to determine the “small” logo dimensuions

    .header-scrolled .logo img {
    width: 100px;
    height: 100px;
    }

    #132341

    Thanks Dude

    Really appreciate your help.

    Sorry to ask.

    I followed your advice and added

    .header-scrolled .logo img {

    width: 100px;

    height: 100px;

    }

    as a custom css

    But sadly its not resizing.

    Ive tried on Firefox & safari on a mac.

    http://www.thenaturalpharmacie.co.uk/hidden/

    Hope you can help.

    As if this works, then this theme is goin to be perfect.

    Rich

    #132342

    Hi,

    Please use this:

    .header-scrolled .logo a img {
    width: 100px;
    height: 100px;
    }

    Regards,

    Ismael

    #132343

    Hi Dude

    Thanks gain for your help.

    Sadly, still dosent resize.

    Happy to pay you.

    Alternatively, if we can fix – i think this will help many others as there are quite a few questions about logo, size position & this would help solve.

    Really hope you can help, as this is the crucial point of whether i use this theme or revert back to my tried & tested nevada theme. I just want to persevere & then i can confidently use this theme for clients in the future as there are more features: css animations, sticky header etc.

    Rich

    #132344

    Morning Ismael

    Any further thoughts on how to get the logo to resize?

    Im soo close.

    Really hope you can help.

    After this i think i can do all the rest myself.

    Rich

    #132345

    Hey!

    Please try to remove the width attribute and just change the height

    .header-scrolled div .logo,
    .header-scrolled div .logo img {
    height: 100px;
    }

    Regards,

    Peter

    #132346

    Hi Peter

    I was so pleased / relived you replied & eager to try your code out.

    Sadly, it still just doesnt want to scale.

    Below is my custom css code.

    Do you think its possible via CSS?

    Happy to pay you, if its taking too much time.

    As always, really appreciate this excellent support.

    Rich

    /* Pages */

    .page-id-5 .title_container {

    display: none;

    }

    .logo img {

    position: fixed;

    }

    @media only screen and (max-width: 768px) {

    .logo img {

    position: relative;

    }

    .header-scrolled div .logo,

    .header-scrolled div .logo img {

    height: 100px;

    }

    #132347

    Hey!

    A curly bracket seems to be missing – try

    div .logo img {
    position: fixed;
    }

    .header-scrolled div .logo,
    .header-scrolled div .logo img {
    height: 100px;
    }

    @media only screen and (max-width: 768px) {
    .logo img {
    position: relative;
    }
    }

    Regards,

    Peter

    #132348

    Thanks soo much Peter. Your star.

    Works perfectly.

    I can go ahead and use this theme now.

    Rich

    #132349

    Peter

    Last thing. Work great on desktops.

    1) IPAD: Is there a custom css that will work on ipad, landscape

    2) MOBILE: Is it there a custom css that will change the logo from “Fixed” so it scrolls up with page on mobile.

    Im going to try myself, thought id ask as it may take me a few hours of trial & error.

    Thanks again.

    Rich

    #132350

    Hi Peter

    Sorted MOBILE, added div

    @media only screen and (max-width: 768px) {

    div .logo img {

    position: relative;

    height: 100px;

    }

    }

    #132351

    Hi Peter

    Nearly there. And thanks to your teams help.

    Ive worked out a way / fix to add a horizontal version of the logo as a background image.

    However, it seems to repeat in two other places.

    Is there a way to remove from behind menu & search panel / on click?

    Here’s the live site: http://www.thenaturalpharmacie.co.uk/hidden/

    Here’s a screenshot: https://dl.dropboxusercontent.com/u/226695/smallheader-example-tile-error.gif

    Thanks in advance. Rich

    Below is my custom css

    /* Pages */

    .page-id-5 .title_container {

    display: none;

    }

    /* Header */

    div .logo img {

    position: fixed;

    padding: 0px;

    top: -2px;

    }

    .header-scrolled div {

    background-image: url(http://www.thenaturalpharmacie.co.uk/hidden/wp-content/uploads/2013/08/tnp-smalllogo-header3.gif);

    background-repeat: no-repeat;

    background-position: left top;

    }

    .header-scrolled div .logo img {

    height: 75px;

    }

    #header_main {

    border-bottom-width: 8px;

    border-bottom-style: solid;

    border-bottom-color: #060;

    -webkit-box-shadow: 0 8px 6px -6px black;

    -moz-box-shadow: 0 8px 6px -6px black;

    box-shadow: 0 8px 6px -6px black;

    }

    /* Naviagtion */

    /* Mobile */

    @media only screen and (max-width: 768px) {

    div .logo img {

    position: relative;

    height: 100px;

    }

    #132352

    Hi Peter

    Nearly there. And thanks to your teams help.

    Ive worked out a way / fix to add a horizontal version of the logo as a background image.

    However, it seems to repeat in two other places.

    Is there a way to remove from behind menu & search panel / on click?

    Here’s the live site: http://www.thenaturalpharmacie.co.uk/hidden/

    Here’s a screenshot: https://dl.dropboxusercontent.com/u/226695/smallheader-example-tile-error.gif

    Thanks in advance. Rich

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Logo ontop of all layers?’ is closed to new replies.